事件委托未按预期工作

event delegate not working as expected

本文关键字：工作 事件      更新时间：2023-09-26

我的点击事件中有一个模板，我将其插入当前表行之后，但问题是当你点击新添加的模板时，该模板有一个名为的事件按钮类。添加事件会终止，不再工作，当页面加载模板时，它只工作一次

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

对于事件委派，唯一需要注意的是，放置处理程序的DOM元素不能被替换。因此，您必须选择最接近的不会被替换的容器。

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

试试这个（我用on替换了delegate，因为delegate现在不推荐使用）：

$('.variations_grid').on('click', '.add', function(e) {
    //your logic
});
相关文章：