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

这是我的密码：

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

$（文档）.ready（函数（）{
$（“#添加策略”）。单击（函数（）{
变量i=（$（'战术评论tr'）。长度-3）/2+1；
$（“#战术评论tr”）.eq（-1）.before（'战术名称：'）；
$（“#战术注释tr”）.eq（-1）.before（‘战术描述：’）；
});
});

我的“添加”策略如下：

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

添加策略

加载此页面时，单击事件工作正常。如果表单中的下拉列表发生更改，它将根据您的选择用重新生成的表单替换DIV容器。重新加载表格时，添加策略的点击功能不起作用。表ID不会更改。在删除元素时，我必须做些什么，以便在元素返回时将事件绑定到它？

不要调用

remove（）

或覆盖html，而是使用

detach（）

方法，该方法将从DOM中删除元素，但将关联的数据/处理程序保留在jQuery的内存中

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

不要调用

remove（）

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

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

您可以通过利用jQuery的
简而言之，您需要将函数绑定到一个不会被删除/替换的静态元素。在本例中，我们将使用
文档
，但是为了提高性能，您应该针对更接近的静态元素

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

$（文档）。在（'单击'，'添加策略'，函数（）上）{
变量i=（$（'战术评论tr'）。长度-3）/2+1；
$（“#战术评论tr”）.eq（-1）.before（'战术名称：'）；
$（“#战术注释tr”）.eq（-1）.before（‘战术描述：’）；
});

这将确保无论单击事件被移除/替换，都会触发该事件。
是，有。在jQuery中，我们称之为事件委派

您可以通过利用jQuery的
简而言之，您需要将函数绑定到一个不会被删除/替换的静态元素。在本例中，我们将使用
文档
，但是为了提高性能，您应该针对更接近的静态元素

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

$（文档）。在（'单击'，'添加策略'，函数（）上）{
变量i=（$（'战术评论tr'）。长度-3）/2+1；
$（“#战术评论tr”）.eq（-1）.before（'战术名称：'）；
$（“#战术注释tr”）.eq（-1）.before（‘战术描述：’）；
});

这将确保无论是否删除/替换，都会触发click事件。
删除元素时，绑定到该元素的所有事件处理程序也将被删除。创建一个新元素，即使是在同一个地方用相同的id创建，也正是这样：一个新元素。您需要再次绑定事件处理程序才能使其工作

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

例如：

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

这将适用于现在或将来任何时候添加的所有“添加”策略实例。这将指向“添加”策略元素

您可能希望将处理程序绑定到更靠近#add_策略元素的容器元素。
删除元素时，绑定到该元素的所有事件处理程序也将被删除。创建一个新元素，即使是在同一个地方用相同的id创建，也正是这样：一个新元素。您需要再次绑定事件处理程序才能使其工作

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

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

例如：

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

这将适用于现在或将来任何时候添加的所有“添加”策略实例。这将指向“添加”策略元素

您可能希望将处理程序绑定到更靠近#add_策略元素的容器元素。
这也是我的答案的可靠替代方案+1.您的替代方案无疑更干净，更易于实施。但是…它通常被开发人员滥用，他们在文档中添加了一百万个事件。这也是我答案的可靠替代方案+1.您的替代方案无疑更干净，更易于实施。但是…它通常被开发人员滥用，他们向文档中添加了一百万个事件。如果元素是被覆盖的容器的一部分，那么分离/重新连接将是非常重要的。这可能是最好的方法。如果元素是被覆盖的容器的一部分，那么分离/重新连接将是非常重要的。这可能是最好的方法。$（“策略注释”\u容器”）。在（“单击”、“添加策略”、（函数（）{…是一个永远不会被删除的容器，但是它不会正确触发操作。在删除/返回之前或之后，如果我在委托处理程序方面遇到问题，我总是会在理解我正在执行的上下文时遇到一些问题。如果你能发布一个简单的示例（Javascript和HTML）关于你现在正在做的事情，我可以看一看$（“战术评论”\u容器”）。关于（“单击”、“添加战术”、（函数（）{…是一个永远不会被删除的容器，但是它不会正确触发操作。在删除/返回之前或之后，如果我在委托处理程序方面遇到问题，我总是会在理解我正在执行的上下文时遇到一些问题。如果你能发布一个简单的示例（Javascript和HTML）你现在所做的我可以看看
$(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>');
});