jQuery事件在ajax調用后綁定兩次

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元素的父.myClickableElement ）：

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

這也將為這些元素啟用事件綁定，這些元素在執行此代碼時不存在於DOM中。 因此，這將是解決您問題的通用解決方案，並且在AJAX完成時，您無需綁定偵聽器。

Answer 2

您可以使用document.on或父容器委派cilck事件，該事件將適用於現有元素以及動態創建的元素，而無需從ajax調用中一次又一次地綁定它

$(document).ready(function(){
   // If you know that elements for which click handler required can be anywhere in the document
   /*$(document).on('click', '.myClickableElement', function(){
    ... event handler code ...
   });*/

   //If you are sure that elements to which click event handler required is belongs to container elements
   $('#container').on('click', '.myClickableElement', 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();   -- not required to bind again
    }
});
}

Answer 3

您必須使用unbind方法取消綁定為元素委派的事件，然后重新綁定它。

$('.myClickableElement').unbind('click').bind('click', function(){
    // action goes here
});

如果您的.myClickableElement已經有一個附加事件，則可以通過取消綁定將其刪除。

為了更好的使用方法，請查閱此文檔 。