jquery - jquery 中的后期绑定(bind)？

Question

有一个只有一行的表:

<table>
  <tr><td><span class="removeItem"></span></td></tr>
</table>

我用它来将函数绑定(bind)到类:

  $('.removeItem').bind('click', function() {
    $(this).parent().remove();
    return false;
  });

稍后，我将具有相同类名 (.removeItem) 的行添加到表中:

var newRow = '<tr><td><span class="removeItem"></span></td></tr>';
$(table).append(newRow);

当我单击第一行项目时，它被删除。动态添加的则不然。

这是为什么？

Answer 1

通过在 table 上放置处理程序来使用事件委托(delegate)与 delegate() ^[docs]方法:

$('table').delegate('.removeItem','click', function() {
    $(this).closest('tr').remove();
    return false;
});

...您可能需要在 table 上放置一个 ID 以缩小您的选择范围。

现在单击冒泡到 table 的事件如果单击的项目与 ".removeItem" 匹配，将调用处理程序选择器。

我还将其更改为使用 closest() ^[docs]获取最近的方法<tr>祖先。

<小时/>

工作示例: http://jsfiddle.net/UxbcN/

这通常优于 .live()因为它只需要运行 table 内的点击选择器而不是整个 document 中的所有点击.