如何在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 + '?');
} 

- Rich

---

函数fConfirmDelete()的内容是什么？ - Jeff Winkworth

编辑了问题以包括fConfirmDelete。 - Rich

Answer 1

用户第一次点击“确定”后，您是否以某种方式动态重新加载表格？如果是这样，可能是事件未绑定到重新加载的表格。尝试使用live事件处理程序代替：

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

- Kip

---

啊哈！当我读到你的第一句话时，我的脑海中灯泡一亮，然后你的代码也给了我解决方案。完美的答案！ - Rich

"live()"已被弃用，请使用"on()"代替。 - Andy Lobel

@AndyLobel 谢谢，我不知道他们已经弃用了.live。我更新了示例以使用新语法。 - Kip

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 
                    });

  }); 

我个人认为，像这样的东西更易于阅读和维护。

仅供参考。 :)

- Mike Fielden

Answer 3

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

- bradenkeith

---

这有什么不同于他所拥有的？ - Kip

Kip，fConfirmDelete 函数基于用户点击“OK”或“Cancel”来返回 true 或 false。如果该函数返回 true，则继续提交操作并触发 return true。如果用户点击取消，则返回 false 将阻止 a.confirm-delete 的原始操作。 - bradenkeith

“是啊，但是 if(x) return true; else return false; 和 return x; 有什么不同呢？” - Kip

我相信我可能误解了问题。然而，这种结构将使他在用户的回应中获得更多的影响力，所以提供它也许并不是那么糟糕。 - bradenkeith