Question

我有一个包含100行的表，每行都有自己的click事件：

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

我希望将此归结为一次点击事件，我认为这会做到吗？

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

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

第二个版本似乎与第一个版本一样多。我做错了什么？

Answer 1

我在jquery上找到了以下解释

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

除了能够处理尚未创建的后代元素上的事件之外，委派事件的另一个优点是，当必须监视许多元素时，它们可能会有更低的开销。在其tbody中包含1,000行的数据表中，此示例将处理程序附加到1,000个元素：

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

委托事件方法只将一个事件处理程序附加到一个元素tbody，而事件只需要冒出一个级别（从点击的tr到tbody）：

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

那应该回答你的问题？

Answer 2

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

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

但是，这样做，除非你用mouseX / mouseY摆弄，否则你将无法检测到哪一行被点击了。你现在就像单击点击事件一样最好。

Answer 3

在jsperf

上测试的second fast为

$('#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，然后将其缩小到{{1}} <下的那些<{1}} / p>

您可以test the performance

阅读Efficient-jquery-selector并查看performance of child selectors

Answer 4

您只能向表中添加事件侦听器，并检查用户是否单击了某行。（即使你在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减少点击事件的数量？

4 个答案: