ajax调用后Jquery事件绑定两次

Question

我想在由 ajax 调用动态创建的元素上绑定一个事件。一些元素已经存在，并且在页面加载时会与它们绑定一个事件。但是当在 ajax 调用之后创建新元素时，新元素就会失去它们的绑定。

我搜索并找到了一个很好的解决方案。 ajax调用后不会触发Jquery事件

在这个问题中，“Jason Fingar”提出了两种解决方案来解决这个问题

• 第二种解决方案是使用 on 方法，但对我不起作用
• 第一种方法有效，但有些问题

这是他提出的第一个解决方案

“1）封装您的“绑定”代码并在页面加载时以及在相关元素添加回页面后立即调用它。例如：“

$(document).ready(function(){
// bind event handlers when the page loads.
bindButtonClick();
});

function bindButtonClick(){
$('.myClickableElement').click(function(){
    ... event handler code ...
});
}

function updateContent(){
$.ajax({
    url : '/ajax-endpoint.php',
    data : {'onMyWay' : 'toServer'},
    dataType : 'html',
    type : 'post',
    success : function(responseHtml){
        // .myClickableElement is replaced with new (unbound) html 
     element(s)
        $('#container').html(responseHtml);

        // re-bind event handlers to '.myClickableElement'
        bindButtonClick();  
    }
});
}

我面临什么问题？ 事件与新元素成功绑定，但对于旧元素或页面加载时加载的元素，事件绑定两次。这有什么问题？

Answer 1

在为同一事件绑定侦听器之前，jQuery 不会检查事件侦听器是否已绑定到元素。在您的代码中，.myClickableElement选择所有此类元素，对于现有元素，将添加重复的侦听器。

首先解除绑定事件侦听器

解决此问题的一种方法是先删除侦听器，然后再绑定它。这样，它对于每个目标元素都会存在一次。

function bindButtonClick(){
  $('.myClickableElement').off('click').on('click', function(){
    ... event handler code ...
  });
}

通过在父元素上使用事件委托

另一种（但有效）的方法是对子元素使用事件委托。我不太了解您的 HTML，但您可以在父元素上执行此操作（.parent这里是所有.myClickableElement元素的父元素）：

$('.parent').on('click', '.myClickableElement', function() {
  ... event handler code ...
});

这也将为这些元素启用事件绑定，这些元素在此代码执行时不存在于 DOM 中。因此，这将是您问题的通用解决方案，并且您不需要在 AJAX 完成时绑定侦听器。