javascript - JQuery:如何刷新事件处理程序

Question

我有一个绑定(bind)到 DOM 元素的 Jquery 处理程序。

  $('.details-control').click( function () {
      var tr = $(this).closest('tr.parentRow');
      var row = table.row(tr);
      var nestedTable = tr.children('td.nested').children('table.nested').clone(true);


        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(nestedTable).show();
            tr.addClass('shown');
        }
  });

上述元素位于分页表格中，因此当表格分页时，页面上的 ('.details-control') 元素会发生变化，并且这些元素没有附加事件。

我希望将事件附加到这些新的 $('details-control') 元素。

我能想到的唯一方法就是再次重写代码，如下所示......

  $('.pagination').click( function () {
  //copy-paste $('.details-control').click( function () {....

  });

但我认为一定有更好的方法......但我的搜索中没有任何结果，因为我不确定这甚至属于什么搜索词。

有没有办法可以命名详细信息控制事件并调用它，这样我就不必复制粘贴或重新附加或刷新处理程序？

Answer 1

您正在寻找事件委托(delegate)，这是将处理程序附加到容器上并过滤根据特定条件(在本例中为选择器)冒泡的事件的过程。假设 .pagination 是 .details-control 的父级，并且该父级永远不会被替换:

$('.pagination').on('click', '.details-control', yourHandler);