Adding a click event to the ColVis list items

Question

I'm working on a web based tool using asp.net and Javascript with Jquery to implement various tables and make them user friendly. For this purpose I am using the lovely Datatables plugin with its extension ColVis for the option of hiding selected columns. What I am now trying to do is to add another .click event to list items in the list generated by ColVis, but I am having a real trouble selecting the correct element with Jquery for attaching the function.

This is the HTML generated by ColVis.

<ul class="ColVis_collection ui-buttonset ui-buttonset-multi" style="...">
    <li class="colVis_select ui-button ui-state-default">...</li>
    <li class="colVis_select ui-button ui-state-default">...</li>
    ...
</ul>

And so on.

What I have tried is this:

 $(".ul").on("click","li" , function (event) {
                Cookies.set('columnsWebform', readingHeaders());
            })

To be as general as possible. But I still cannot get it to respond to clicks.

Any help would be greatly appreciated.

EDIT WITH SOLUTION

As Joel pointed out the selector is wrong. That was not the whole problem though. The HTML code for the list was not generated until a button was pressed.

<button class="ColVis_Button ColVis_MasterButton"> 

Thus connecting the creation of the clickevent listeners to the pressing of this button solved the problem.

 $(".ColVis_MasterButton").click(function () {
            $("ul").on("click", "li", function () {
                Cookies.set('columnsWebform', readingHeaders());
            })
        });

Answer 1

This is the working solution. First off the selector needs to be for the tag ul and not the class ul.

$("ul").on("click", "li", function () {
            Cookies.set('columnsWebform', readingHeaders());
        })

This did not solve the whole problem though. The HTML code for the list was not generated until a button was pressed.

<button class="ColVis_Button ColVis_MasterButton">

Thus connecting the creation of the clickevent listeners to the pressing of this button solved the problem.

$(".ColVis_MasterButton").click(function () {
        $("ul").on("click", "li", function () {
            Cookies.set('columnsWebform', readingHeaders());
        })
    });

Answer 2

Use $('ul').

Currently you are selecting the class ul by using .ul not the ul tag.