我想在由 ajax 调用动态创建的元素上绑定(bind)一个事件。 一些元素已经存在,并且在页面加载时将事件与它们绑定(bind)。但是当在 ajax 调用之后创建新元素时,新元素将失去它们的绑定(bind)。
我搜索并找到了一个很好的解决方案。 Jquery Event won't fire after ajax call
在这个问题中,“Jason Fingar”提出了两种解决方案来解决这个问题
- 第二个解决方案是使用 on 方法,但它对我不起作用
- 第一种方法可行,但存在一些问题
这是他提出的第一个解决方案
"1) Encapsulate your "binding" code and call it both on page load and immediately after the element in question gets added back to the page. For example:"
$(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();
}
});
}
我面临什么问题? 该事件与新元素成功绑定(bind),但对于旧元素或页面加载时加载的元素,事件被绑定(bind)两次。 这有什么问题?
最佳答案
jQuery 不会在为同一事件绑定(bind)监听器之前检查事件监听器是否已经绑定(bind)到元素。在您的代码中,.myClickableElement
选择所有此类元素,并且对于现有元素,将添加重复的监听器。
先解除事件监听器的绑定(bind)
解决此问题的一种方法是先删除监听器,然后重新绑定(bind)它。这样对于每个目标元素都会存在一次。
function bindButtonClick(){
$('.myClickableElement').off('click').on('click', function(){
... event handler code ...
});
}
在父元素上使用事件委托(delegate)
另一种(但有效的)方法是对子元素使用事件委托(delegate)。我不太了解您的 HTML,但您可以在父元素上执行此操作(.parent
这里是所有 .myClickableElement
元素的父元素):
$('.parent').on('click', '.myClickableElement', function() {
... event handler code ...
});
这也将为那些元素启用事件绑定(bind),这些元素在执行此代码时不存在于 DOM 中。因此,这将是针对您的问题的通用解决方案,并且您无需在 AJAX 完成时绑定(bind)监听器。
关于javascript - Jquery 事件在 ajax 调用后绑定(bind)两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51943743/