Jquery .on()在第一次单击后丢失事件检测

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就绪的相关元素。