title: Adding a click event to the ColVis list items
body: <p>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 <a href="http://datatables.com" rel="nofollow">Datatables</a> 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. </p>
  
  <p>This is the HTML generated by ColVis.</p>
  
  <pre><code>&lt;ul class="ColVis_collection ui-buttonset ui-buttonset-multi" style="..."&gt;
      &lt;li class="colVis_select ui-button ui-state-default"&gt;...&lt;/li&gt;
      &lt;li class="colVis_select ui-button ui-state-default"&gt;...&lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>And so on. </p>
  
  <p>What I have tried is this: </p>
  
  <pre><code> $(".ul").on("click","li" , function (event) {
                  Cookies.set('columnsWebform', readingHeaders());
              })
  </code></pre>
  
  <p>To be as general as possible. But I still cannot get it to respond to clicks.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p><strong>EDIT WITH SOLUTION</strong></p>
  
  <p>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. </p>
  
  <pre><code>&lt;button class="ColVis_Button ColVis_MasterButton"&gt; 
  </code></pre>
  
  <p>Thus connecting the creation of the clickevent listeners to the pressing of this button solved the problem. </p>
  
  <pre><code> $(".ColVis_MasterButton").click(function () {
              $("ul").on("click", "li", function () {
                  Cookies.set('columnsWebform', readingHeaders());
              })
          });
  </code></pre>