第一次单击后,Jquery .on()丢失EVENT检测

Question

我在Intranet页面上有一个部分,它允许员工对客户票据进行跟进的摘要视图.我们添加了一键式事件来删除特定记录,方法是单击每行末尾的标准关闭图标(包含类.fudel)和(value ="####").删除由PHP通过POST事件处理.我使用相同的Jquery启动删除,在发送POST后重新加载摘要DIV,以便摘要列表是最新的.

问题是事件只会在.load()发生后触发一次Jquery无法再检测到动态div中的点击事件.如果你看一下我使用的Jquery,它使用.on()方法,据我所知,它取代了.live(),专门用于处理动态加载元素中的事件检测.

$('.fudel').on("click", function() { 
    var m = $(this).attr("value"); 
    var answ = confirm("Press OK to DELETE follow-up record for: ("+ m +")");
    if (answ == true) {
        $.post("includes/phpfunctions.php", {
            fudelete: m
        });
        $("#followup").load(location.href + " #followup > *");
    } 
    else {
        $.alert('Deletion Canceled', 'User Notice');
    }
});

此外,在最近的两个问题中,我发现许多这些事件检测问题都在需要添加第二个,第三个,第四个等等.Jquery调用了on()事件的"回调".如果这最终成为了这里的问题作出解释,我会问别人提供一个很好的链接的文档的解释时,Jquery的动作需要落在内回调范围VS何时能/应该落在外面回调范围.

Answer 1

如果load()函数正在替换表的内容(包括.fudel元素),则需要使用委托事件处理程序.试试这个:

$('#followup').on('click', '.fudel', function() { 
    var m = $(this).attr("value"); 
    var answ = confirm("Press OK to DELETE follow-up record for: ("+ m +")");
    if (answ == true) {
        $.post("includes/phpfunctions.php", {
            fudelete: m
        });
        $("#followup").load(location.href + " #followup > *");
    } 
    else {
        $.alert('Deletion Canceled', 'User Notice');
    }
});

请注意,click事件现在绑定到#followup元素并委托给任何子.fudel元素.