0

这是我的代码：

$(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 不变。删除元素时我必须做些什么，以便在它返回时将事件绑定到它？

4

3 回答 3

4

就在这里。在 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>');
});

这将确保 click 事件无论被删除/替换如何都会触发。

于 2013-06-12T22:00:46.683 回答
2

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

var detachedHtml = $('#add_tactic').detach();
// later on...
$(parentContainer).append(detachedHtml);
于 2013-06-12T21:59:44.697 回答
0

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

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

例如：

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

这将适用于现在或将来随时添加的所有#add_tactic 实例。这将指向#add_tactic 元素

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

于 2013-06-12T22:04:34.753 回答