第一次单击后，Jquery .on（）丢失EVENT检测

Question

我在内部网页面上有一个部分，允许员工对客户门票进行跟进的摘要视图。我们添加了一键式事件来删除特定记录，方法是单击每行末尾的标准关闭图标（包含类.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操作何时需要在回调范围内 >它可以/应该下降<回调范围的强>外。

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元素。

Answer 2

尝试委托活动，因为如果你这样做：

 $('.fudel').on("click", function() { 

如果此元素存在，它会将事件附加到.fudel，但如果DOM加载中不存在，则可以执行以下操作：

 $('body').on("click", ".fudel", function() { 

通过这种模式，您可以定位将来可能存在的元素，但不需要在DOM准备就绪。