javascript - Ajax 破坏 .on ('click' ，事件处理程序)

Question

我有一个项目表，其中有一列链接，单击这些链接可以打开 float 菜单。我还有一个侧边栏链接，它将执行 ajax 请求并对结果进行排序(它会使用新表重新填充表)。当表结果尚未排序(由 ajax 调用重新填充)时，链接可以正常工作。但是，当我对结果进行排序并执行 ajax 请求时，表中的链接不再起作用。

我想知道如何保留表链接中的点击事件？我认为 jQuery 的 .on(selector, eventhandler) 可以解决这个问题，但在我的情况下似乎并非如此。

这是我目前对表格链接的点击事件的了解:

  $('.addSet').on('click', function(event) {
    event.stopPropagation();
    return menuShow(this);
  });

  $('.addSetMenu input, .addSetMenu select, .addSetMenu').on('click', function(event) {
    return event.stopPropagation();
  });

  menuShow = function(menuParent) {
    var menu, parentLeft, parentOffset, parentTop;
    menu = $(menuParent).siblings('.addSetMenu');
    parentOffset = $(menuParent).offset();
    parentTop = parentOffset.top;
    parentLeft = parentOffset.left;
    $(menu).css({
      'top': parentTop + 20,
      'left': parentLeft - 160
    });
    resetMenu();
    return $(menu).toggleClass('hide');
  };

  $('html, .setCancelBtn').on('click', function() {
    return resetMenu();
  });

  resetMenu = function() {
    var menu;
    menu = $('.addSetMenu input[type=text]');
    $('.addSetMenu select').val('default');
    $(menu).addClass('hide');
    $(menu).val('');
    return $('.addSetMenu').addClass('hide');
  };

Answer 1

当您的表被重新填充时，这些链接对应的 DOM 节点将被删除。他们所有的事件处理程序也是如此。您应该 Hook 某些父元素，例如您的表格。从那里您可以捕获传播的事件。

$('table-selector').on('click', 'urlSelector', function(event) {
    //handler code
})

请参阅此处的“直接和委托(delegate)事件”:http://api.jquery.com/on/