AJAX操作后绑定的事件处理程序不再工作

Bound event handlers no longer work after AJAX manipulation

本文关键字：程序 不再 工作 事件处理 操作 绑定 AJAX      更新时间：2023-09-26

我正在将一些jQuery事件处理程序绑定到页面中的一个元素，该元素最初运行良好，但如果用户选择页面上的单选按钮，则该元素将被删除；他们可以通过选择另一个单选按钮将其带回；然而，当AJAX将数据加载回时，函数不再从事件处理程序中激发。

我将其与以下内容绑定：

jQuery(document).ready(function(){
    jQuery('#buyout_field').mouseleave(function() {
        update();
    });    
    jQuery('#buyout_field').focusout(function() {
        update();
    });
});

因此，概括一下，最初运行良好，但一旦AJAX删除并放回数据，它就不再运行了。

以下是运行AJAX的代码：

function update() {
    getAjaxData(loadUrl, dataObject, 'GET', 'json')
        .done(function(response) {
            // Add/Hide other data
            jQuery('#buy_now').html(response.buy_now);            
        })
    // End
}
function getAjaxData(loadUrl, dataObject, action, type) {
    return jQuery.ajax({
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });    
}

元素buyout_field包含在buy_now元素内。

元素不是被放回DOM中了吗？

试试这个：

jQuery('#buy_now').on('mouseleave', '#buyout_field', function() {
    update();
});
jQuery('#buy_now').on('focusout', '#buyout_field', function() {
    update();
});

您需要委派事件

 jQuery(document).on('focus', '#buyout_field', function() {
     update();
 });
 jQuery('#buyout_field').on({
   mouseleave : function() {
       update();
   }, $(document)
 });

最好将委托给文档的事件替换为事件绑定到的静态祖先。。在这种情况下，'#buy_now'将是静态父级，因为当绑定事件时，它总是出现在页面上。

相关文章：