如何在jQuery中为链接添加确认功能,以便始终显示对话框？

Question

我有一个显示记录行的HTML表,并在末尾有一个列,带有删除链接.每个删除链接都有一个确认删除类.我需要在点击时弹出一个确认对话框,因为它在多个页面中使用,在外部JS文件中创建了一个确认功能.

我已经使用jQuery [帖子底部的代码]添加了对链接点击的函数调用,并且它工作正常,直到对话框确认一次[用户单击确定].然后不再调用该函数.

我想我错过了一些非常简单的东西,虽然因为我不使用JS/jQuery,所以我的知识可能存在差距.为什么在第一次好之前它才能正常工作？它似乎存储了对结果的引用,并为每个链接重用它而不是唯一的引用.

这是在Notes页面上使用的代码:

$(function() {
        // Add Confirmation dialogs for all Deletes
        $("a.confirm-delete").click(function(event) {
            return fConfirmDelete('Note');
        });
});

和fConfirmDelete函数

function fConfirmDelete( deleteObj ) {
    return confirm('Are you sure you wish to delete this ' + deleteObj + '?');
} 

Answer 1

用户第一次单击"确定"后,是否以某种方式动态重新加载表？如果是这样,可能是事件未绑定到重新加载的表.请尝试使用直播事件处理程序:

jQuery 1.7+

$(function() {
        // Add Confirmation dialogs for all Deletes
        $(document).on('click', 'a.confirm-delete', function(event) {
            return fConfirmDelete('Note');
        });
});

jQuery 1.3-1.8:

$(function() {
        // Add Confirmation dialogs for all Deletes
        $("a.confirm-delete").live('click', function(event) {
            return fConfirmDelete('Note');
        });
});

在原始代码中,$("a.confirm-delete").click(...)只会将事件绑定到DOM中已有的a.confirm-delete对象.如果稍后添加新元素,则事件不会绑定到该元素.通过使用jQuery的实时事件处理程序,该事件将绑定到当前存在的任何元素或动态创建的任何元素.a.confirm-deletea.confirm-delete