如何通过JQuery减少点击事件的数量？

问题描述：

我有行数百表和每一行都有自己的点击事件：如何通过JQuery减少点击事件的数量？

$('#scorecard-table tbody > tr.accordion').on('click', function (event) {}

我想这归因于点击事件，我想这会做到这一点？

$('#scorecard-table').on('click', 'tbody > tr.accordion', function (event) {}

我认为这会在表本身上分配一个单击事件而不是每行事件？

第二个版本似乎只有第一个版本的事件数量一样多。我究竟做错了什么？

你想点击做什么...打开/关闭手风琴？ – Dwza

在点击处理程序中，你需要知道点击的行/单元格吗？ –

你如何或在哪里计数事件监听器？ –

答

我发现jQuery的

http://api.jquery.com/on/

下面的解释除了其处理能力关于尚未创建的后代元素的事件，委派事件的另一个优点是当必须监视许多元素时，它们的潜在开销要低得多。在具有在其TBODY 1000行的数据表，该实施例中附加的处理程序的1,000个元素：

$("#dataTable tbody tr").on("click", function() { 
    alert($(this).text()); 
});

委派的事件的方法附着的事件处理程序仅一个元件，所述TBODY，和事件只需要气泡上升一级（从点击tr到tbody）：

$("#dataTable tbody").on("click", "tr", function() { 
    alert($(this).text()); 
});

这应该回答你的问题吗？

这就是我的想法，但在我的场景中，我仍然得到了100多次点击事件，也许这只是我使用的FireFox插件，当它们不是时，将它们显示为单独的点击事件。 – KevinUK

答

不是100％肯定你想在这里做的......如果你想要做的整个表（只是一个事件）是什么，为什么不只是做：

$('#scorecard-table').on('click', function (event) {}

做这本尽管如此，除非你用鼠标X /鼠标Y弄乱了你，否则你将无法检测到哪一行被点击。您现在拥有像现在这样的单一点击事件的最佳状态。

你可以使用事件Object来知道用户点击的地方，看看我的答案。 –

好东西，想到了:) –

答

的second一个是fast作为测试jsperf

$('#scorecard-table').on('click', 'tbody > tr.accordion', function(event) { 
    // your code 
});

如上将选择$('#scorecard-table')第一然后绑定click event到tbody > tr.accordion

而在第一酮

$("#scorecard-table tbody > tr.accordion")从评估从右到左 - 即它最先找到的所有页面的tr.accordion rows，然后范围缩小到那些在#scorecard-table tbody

在这里，您可以test the performance

阅读Efficient-jquery-selector，看看performance of child selectors

答

只能添加一个事件监听器到表格中，并检查用户是否点击了一行。（它会工作，即使你dinamically增加行数）

$('#myTable').on("click", function (e) { 

    if(e.target.tagName == "TD"){ 
     alert(e.target.parentNode.id); 

     // if you want the jQuery row object 
     // var rowClicked = $(e.target.parentNode) 
    } 
});

的jsfiddle例如：http://jsfiddle.net/utVzx/2/

如何通过JQuery减少点击事件的数量？

相关推荐