向 ColVis 列表项添加点击事件

Question

我正在开发一个基于网络的工具，使用 asp.net 和 Javascript 以及 Jquery 来实现各种表格并使它们对用户友好。为此，我使用可爱的 Datatables 插件及其扩展名 ColVis 来选择隐藏选定的列。我现在要做的是添加另一个 .click 事件以列出 ColVis 生成的列表中的项目，但我在选择带有 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());
            })

尽可能通用。但是我仍然无法让它响应点击。

如有任何帮助，我们将不胜感激。

用解决方案编辑

正如乔尔指出的那样，选择器是错误的。但这还不是全部问题。在按下按钮之前，不会生成列表的 HTML 代码。

<button class="ColVis_Button ColVis_MasterButton">

因此将点击事件侦听器的创建与按下此按钮联系起来解决了问题。

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

Answer 1

使用$('ul').

目前您使用 .ul 而不是 ul 标签来选择 class ul。

Answer 2

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

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

但这并没有解决全部问题。直到按下按钮，列表的 HTML 代码才生成。

<button class="ColVis_Button ColVis_MasterButton">

因此将点击事件侦听器的创建与按下此按钮联系起来解决了问题。

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

向 ColVis 列表项添加点击事件

Adding a click event to the ColVis list items

jquery

datatables