Question

这是我的代码：

$(document).ready(function(){
    $("#add_tactic").click(function(){
        var i = ($('#tactic_commentary tr').length-3)/2+1;
        $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label">Tactic Name:</div></td><td style="width: 575px" class="auto-style1"><input maxlength="150" name="tactiname'+i+'" style="width: 565px" type="text" /></td></tr>');
        $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label" class="auto-style1">Tactic Description:</div></td><td style="width: 575px" class="auto-style1"><textarea name="tacticdescription'+i+'"></textarea></td></tr>');
    });
});

我的#add_tactic如下：

<div id="add_tactic">Add Tactic</div>

加载此页面时，点击事件正常。如果表单中的下拉列表发生更改，它将根据您的选择使用重建的表单替换DIV容器。重新加载表时，add_tactic的on click函数不起作用。表ID不会更改。在删除元素时是否需要执行某些操作以便事件在返回时绑定到它？

Answer 1

是的，有。在jQuery中，我们称之为事件委托。

您可以通过利用jQuery .on()来实现事件委派简而言之，您需要将函数绑定到不会被删除/替换的静态元素。对于此示例，我们将使用document但是为了提高性能，您应该定位一个更接近的静态元素。

$(document).on('click', '#add_tactic', function(){
    var i = ($('#tactic_commentary tr').length-3)/2+1;
    $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label">Tactic Name:</div></td><td style="width: 575px" class="auto-style1"><input maxlength="150" name="tactiname'+i+'" style="width: 565px" type="text" /></td></tr>');
    $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label" class="auto-style1">Tactic Description:</div></td><td style="width: 575px" class="auto-style1"><textarea name="tacticdescription'+i+'"></textarea></td></tr>');
});

这将确保点击事件无论是否被删除/替换都会触发。

Answer 2

不要调用remove()或覆盖你的html，而是使用detach()方法，它将从DOM中删除元素，但将相关的数据/处理程序保存在jQuery的内存中。

var detachedHtml = $('#add_tactic').detach();
// later on...
$(parentContainer).append(detachedHtml);

Answer 3

删除元素时，所有绑定到它的事件处理程序也会被删除。创建一个新元素，即使在具有相同id的相同位置，也正是如此：一个新元素。您需要再次绑定事件处理程序才能使它们正常工作。

或者，您可以将处理程序绑定到父容器并委托。

例如：

$('body').on('click', '#add_tactic', function(e) {
    // your code here
});

这将适用于#add_tactic的所有实例，或在将来的任何时间添加。此将指向#add_tactic元素

您可能希望将处理程序绑定到更靠近#add_tactic元素的容器元素。

与删除的元素关联的jQuery操作和重新添加的操作不会触发

3 个答案: