javascript - 如何在 jquery 中正确编写一个 "Are you sure you want to delete/create/etc?"对话框

Question

我已在此线程上发帖 - How do I pass function as a parameter in javascript用于创建具有多种功能的弹出框请求。

那里的一个答案提出了一个我认为应该有一个新线程的问题。

我的任务是这样的 - 每个元素我都有几个按钮(假设我有几篇文章，每一篇我都可以删除，编辑等。) - 对于每个按钮我想要一个弹出窗口询问我是否确定要执行此任务的框。

我该如何正确操作？

这是当我点击删除按钮时发生的事情的例子:

$('.delete').click(function(){
    var obj={title:"The Header",someText:"Are you sure?"};
    DisplayPopUp(obj,function(){console.log('going to delete');});
});

在我收到“你确定吗？”之后弹出 - 这是弹出功能:

function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').click(function(e){
       e.preventDefault();
       callback(obj);
    });
}

我主要担心的是，每次单击删除按钮时，我都会乘以“你确定”按钮功能。 如何在重新创建事件之前将其删除？我需要将它放在哪里？

总的来说 - 这是正确的方法还是有更好、更清晰的代码(假设我需要在不使用 jQuery-UI 的情况下完成它？

考虑到我希望它是流畅的并且可以处理创建/删除/编辑等多项任务......

谢谢， 阿隆

=========== HTML ==============

看起来像这样:- 我使用 $('content').html(theContentIneed) 来填充内容并切换显示模式以隐藏/取消隐藏它。

<div id="popup">
   <div id="content">
   </div>
   <a id="actionButton">action</a>
</div>

Answer 1

您可能想使用 jQuery 插件模式:

$.fn.displayPopUp = function(data, callback) {
    return this.each(function() {
        // popup stuff
        if (typeof callback == 'function') {
            callback.call(this);
        }
    };
});


$('.delete').click(function(){
    $(this).displayPopUp({
        title: "The Header",
        someText: "Are you sure?"
    }, function() {
        console.log('going to delete');
    });
});