点击功能不起作用

Question

我有一个表格，我可以使用克隆函数添加行，如下所示：

new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last');

每一行都有特殊的单元格，内容如下所示：

$(new_row).children('.action_2').html('<a class="row_delete"><img src="/images/pack/cross.png" alt="Cancel" /> Cancel</a>');

问题是函数$('.row_delete').click(function(){...})无法使用这个动态添加的行，出了什么问题？

Answer 1

你需要使用.live函数（.live（'click'，function（e）{/ stuff /}）;）（并删除处理程序，使用.die（） ）

这样做的原因是bind，为每个指定的元素添加一个click处理程序（在你的例子中使用.row_delete类），以及稍后添加的元素都没有被感染。

Live（），将处理程序绑定得更高，然后检查注册的点击是否发生在其中一个指定的元素中。

请记住，如果元素上有另一个指定的处理程序，这会阻止事件的传播（或以IE语言冒泡），则不会调用live（）的回调。

Answer 2

点击功能正在页面加载时应用于该类的行。

您必须使用live（）方法才能正常工作：

http://api.jquery.com/live/

使用live，您可以使页面整个生命周期内与给定模式匹配的所有元素具有相同的行为。

$('.row_delete').live('click',function(){...})

应该这样做。

Answer 3

使用jQuery live方法分配事件，例如

$('tr').live('click', function() {
  ///your code here
});

所以当你在那个地方添加时，会附加新的tr事件。

Answer 4

使用.live()或.delegate()代替.click(...)。

  

.live()

     

为现在和将来与当前选择器匹配的所有元素附加处理程序。

     

.delegate()

     

根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序。

事件绑定代码看起来像

$('.row_delete').live('click', function(){...});
// or
$('#my_table_id').delegate('.row_delete', 'click', function(){...});