将点击事件添加到ColVis列表项

Question

我正在使用asp.net和Javascript与Jquery实现各种表格并使它们用户友好的基于Web的工具。为此，我使用了可爱的Datatables插件及其扩展ColVis，以隐藏所选列的选项。现在我正在尝试向ColVis生成的列表中的列表项添加另一个.click事件，但我很难用Jquery选择正确的元素来附加功能。

这是由ColVis生成的HTML。

<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>

等等。

我尝试过的是这个：

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

尽可能通用。但我仍然无法使其响应点击。

任何帮助都将不胜感激。

解决方案编辑

正如Joel所指出的那样，选择器是错误的。但问题并不仅如此。列表的HTML代码直到按下按钮才生成。

<button class="ColVis_Button ColVis_MasterButton"> 

因此，将clickevent监听器的创建与按下此按钮相连接解决了问题。

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

- Nfourx

---

欢迎来到 Stack Overflow！您可以将您的解决方案发布为答案并接受它，这将标记问题已关闭。 - Gyrocode.com

嗨，@Gyrocode.com，我已经使用了你的代码，但它仍然无法正常工作。 - anujeet

Answer 1

这是可行的解决方案。首先，选择器需要是标签ul而不是类别ul。

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

然而这并没有彻底解决问题。 列表的HTML代码要等到按下按钮后才会生成。

<button class="ColVis_Button ColVis_MasterButton">

因此，将创建clickevent监听器与按下此按钮连接起来解决了问题。

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

- Nfourx

Answer 2

使用$('ul')。

目前你是通过使用.ul而不是ul标记来选择类别ul。

- Joel Almeida

---

是的，我在发布后很快意识到了这个问题，但尽管我选择了正确的标签，问题仍然存在。但我相信我已经找到了原因。HTML代码直到单击某个按钮后才会实际生成。由于我的“单击”代码是在document.ready期间执行的，因此HTML尚不存在。因此，我将尝试在生成HTML后连接单击事件侦听器。谢谢你的快速回答。 - Nfourx

是的，这是正确的方法。在生成HTML后绑定事件。 - Joel Almeida

那个解决方案完美地奏效了，我已经更新了帖子。 （也许应该将其编写为问题的答案？）再次感谢。 - Nfourx

Post it as an answer. - Joel Almeida