如何向 jQuery 中的链接添加确认功能，以便始终显示对话框？

Question

我有一个显示记录行的 HTML 表格，并在末尾有一个带有删除链接的列。每个删除链接都有一个确认删除类。我需要在单击时弹出一个确认对话框，并且由于它在多个页面中使用，因此在外部 JS 文件中创建了一个确认函数。

我已经使用 jQuery [代码底部的代码] 将函数调用添加到链接的单击中，并且在 [用户单击确定] 后确认对话框之前它工作正常。然后不再调用该函数。

我认为我遗漏了一些非常简单的东西，但由于我不经常使用 JS/jQuery，我的知识可能存在差距。为什么在第一个 OK 之前它可以正常工作？它似乎是存储对结果的引用并重复使用它，而不是每个链接的唯一引用。

以下是在备注页面上使用时的代码：

$(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

在用户第一次单击确定后，您是否会以某种方式动态重新加载表格？如果是这样，则可能是事件未绑定到重新加载的表。改用live event handler：

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(...) 只会将事件绑定到a.confirm-delete 对象已经在 DOM 中。如果稍后添加新的a.confirm-delete 元素，则事件不会绑定到它。通过使用 jQuery 的实时事件处理程序，事件将绑定到当前存在的任何 a.confirm-delete 元素或任何动态创建的元素。

Answer 2

@bradenkeith 的回答可能是正确的，但您可能想更多地利用 jQuery 并做一个 jQuery 对话框。

$("a.confirm-delete").click(function(event) {
      var message = fConfirmDelete(deleteObj);
      var $dialog = $j('<div></div>')
                    .html(message)
                    .dialog({
                     autoOpen: true,
                     bgiframe: true,
                     buttons: {
                       'Dismiss': function() { $j(this).dialog('close');}
                       'Delete': function() { //Do delete things }
                     }
                     modal: true
                     // other parameters here 
                    });

  }); 

在我看来，类似的东西可能更容易阅读和维护。

只是一种选择。 :)

Answer 3

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