Question

我将一些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中的吗？

Answer 1

试试这个：

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

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

Answer 2

您需要委派活动......

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

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

将委托给文档的事件替换为绑定事件的静态祖先总是更好的主意。在这种情况下，'#buy_now'将是静态父级，因为它始终存在于绑定事件时的页面。

在AJAX操作之后，绑定事件处理程序不再起作用

2 个答案: