事件代理不按预期工作

Question

我有一个模板，在我的点击事件中，我插入在当前表行后，但问题是当你点击新添加的模板，其中有一个事件按钮类称为.add事件死亡和不工作了它只有一次，当页面加载模板

$('.variations_grid tr td').delegate('.add', 'click', function(e) { 
    $(this).closest('tr').after(template); 
    //the buttons int the template don't work on click event 
}); 

var template = '<tr>'; 
template += '<td class="white-space:nowrap">'; 
template +=  '<input type="hidden" name="variationsid" value="1" />'; 
template +=  '<button class="btn btn-default btn-block add" type="button">&nbsp;<span class="glyphicon glyphicon-plus-sign"></span>&nbsp;</button>'; 
template +=  '<button class="btn btn-default btn-block remove" type="button">&nbsp;<span class="glyphicon glyphicon-minus-sign"></span>&nbsp;</button>'; 
template += '</td>'; 
template += '<tr>'; 

Answer 1

随着事件委托的工作，尊重的唯一事情是，在该处理程序放入DOM元素必须不可替代的。因此，您必须选择不会被替换的最近可能的容器。

例如，如果要替换或添加新的<tr>或<td>标记，请勿在这些标记上绑定事件处理程序，否则委派将无法工作。

试试这个（我换成delegate与on因为delegate现在已经过时）：

$('.variations_grid').on('click', '.add', function(e) { 
    //your logic 
});