jquery中的后期绑定？

Question

有一个表有一行：

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

我使用它将函数绑定到类：

  $('.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

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

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

...您可能希望在桌面上放置一个ID，以缩小您的选择范围。

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

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

---

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

这通常比[{1}}更受欢迎，因为它只需要为.live()内的点击而不是整个table中的所有点击运行选择器。

Answer 2

您需要使用live功能。这会将click事件绑定到与选择器匹配的未来元素。

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

Answer 3

设计

bind()仅在此精确时刻将处理程序绑定到$("mySelector")的结果。在您描述的场景中有两种选择：

1. 创建新行后，请致电bind()。
2. 调用live()，它绑定与选择器匹配的所有当前和未来元素。 （参见live）的文档。