被移除并重新添加的元素关联的jQuery操作不会触发。

9 浏览
0 Comments

被移除并重新添加的元素关联的jQuery操作不会触发。

这是我的代码：

$(document).ready(function(){
    $("#add_tactic").click(function(){
        var i = ($('#tactic_commentary tr').length-3)/2+1;
        $("#tactic_commentary tr").eq(-1).before('战术名称：');
        $("#tactic_commentary tr").eq(-1).before('战术描述：');
    });
});

我的 #add_tactic 如下所示：

添加战术

当页面加载时，点击事件正常工作。如果表单中的下拉菜单更改，它将用一个基于您的选择的重建表单替换 DIV 容器。当重新加载表格时，add_tactic 的点击函数不起作用。表格的 ID 不会改变。在删除元素时，是否需要执行某些操作，以便在其返回时重新绑定事件？

0

3 答案

0 Comments

当你移除一个元素时，绑定在它上面的所有事件处理程序也会被移除。即使在相同的位置使用相同的id创建一个新元素，它也只是一个新元素。你需要重新绑定事件处理程序才能使它们起作用。

另一种方法是将处理程序绑定到父容器并进行委托。例如：

$('body').on('click', '#add_tactic', function(e) {
    // 在这里写你的代码
});

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

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

$("tactic_commentary_container").on("click","#add_tactic",(function(){ ... 是一个永远不会被移除的容器，但它不能正确触发动作。无论是在移除/返回之前还是之后。

当我使用委托处理程序时遇到问题，原因通常是我在执行环境中对上下文的理解有问题。如果你能提供一个简单的例子（Javascript和HTML），我可以看一下。

0
0 Comments

问题出现的原因是因为当使用remove()方法或者覆盖HTML时，与元素相关联的jQuery事件不会被触发。解决方法是使用detach()方法，它会将元素从DOM中移除，但保留jQuery内存中的相关数据和处理程序。

以下是解决方法的示例代码：

var detachedHtml = $('#add_tactic').detach();
// 稍后...
$(parentContainer).append(detachedHtml);

此外，还有一种可行的替代方法。你的替代方法更加清晰和易于实现。但是...通常被开发人员滥用，会向文档添加大量事件。

总结起来，为了避免jQuery事件相关问题，应使用detach()方法代替remove()方法或覆盖HTML。这样可以保留相关数据和处理程序，并在需要时重新添加元素。

0
0 Comments

在jQuery中，与被移除和重新添加的元素相关的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('
Tactic Name:
');
    $("#tactic_commentary tr").eq(-1).before('
Tactic Description:
');
});

通过这种方式，无论元素是否被移除或替换，点击事件都会被触发。

如果元素是被覆盖的容器的一部分，将其分离/重新附加可能会比较麻烦。使用事件委托方式可能是最佳的解决方法。

0