向ColVis列表项添加单击事件

我正在使用基于Web的工具，使用asp.net和Javascript和Jquery实现各种表并使其对用户友好。为此，我使用可爱的Datatables插件及其扩展名为ColVis的隐藏选定列的选项。我现在试图做的是添加另一个.click事件来列出由ColVis生成的列表中的项目，但是我很难用Jquery选择正确的元素来附加函数。向ColVis列表项添加单击事件

这是由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">

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

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

来源

2015-07-10 Nfourx

欢迎堆栈溢出！您可以发布您的解决方案作为答案并接受它，这会将问题标记为已关闭。 –

Hi @ Gyrocode.com您好，我已经使用您的代码，但它仍然无法正常工作 – anujeet

这是工作解决方案。首先，选择器需要用于标签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()); 
     }) 
    });

来源

2015-07-10 13:15:07 Nfourx

使用$('ul')。

目前您在使用.ul而不是ul标签选择类别ul。

来源

2015-07-10 10:36:57

是的，我发布了这个问题后不久就意识到这个问题，但问题仍然存在，尽管选择了正确的标签。但我相信我已经找到了原因。在点击某个按钮之前，HTML代码实际上并未生成。由于我的“点击”代码是在document.ready期间执行的，因此HTML尚不存在。所以我们会在HTML生成后尝试连接点击事件监听器。谢谢你的快速回答。 – Nfourx

是的，这就是要走的路。在HTML生成后绑定事件。 –

完美解决问题，用解决方案更新了帖子。（应该可以写成对问题的回答吗？）再次感谢。 – Nfourx

向ColVis列表项添加单击事件

回答

相关问题