点击功能不起作用

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

stuff/}); )（要删除处理程序，请使用 .die() ）

您需要使用 .live 函数 ( .live('click', function(e){ / 这就是绑定，将单击处理程序添加到指定的每个元素（在示例中使用 .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(){...});