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

使用事件代表团将在table的处理程序与方法delegate()^[docs]：

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

...你可能要放置在桌子上的ID，以缩小选择范围。

现在如果点击的物品与".removeItem"选择器相匹配，点击会触发table的事件将调用处理程序。

我也改变它使用closest()^[docs]方法得到最近的<tr>祖先。

---

工作实施例：http://jsfiddle.net/UxbcN/

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

Answer 2

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

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

Answer 3

bind()通过设计仅结合处理程序的$("mySelector")在那一时刻的结果。在你描述的场景中，你有两种选择：

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