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

Answer 2

现在我们可以看到你只是隐藏/显示HTML（不创建/销毁它），你可以通过在任何事情开始之前协助事件处理程序并使用.data来解决太多点击处理程序的问题（）方法来存储你的上下文：

$('#actionButton').click(function(e){
   e.preventDefault();
   var fn = $(this).data("callback");
   fn();
});

function DisplayPopUp(obj, callback) {
    $('#actionButton').data("callback) = function() {callback(obj);};
    // do other stuff here to make the popup visible, etc...
}

或者，如果你真的想按照你的方式去做并使用jQuery 1.7 +：

function DisplayPopUp(obj, callback) {

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

如何正确编写“你确定要删除/创建/等？” jquery中的对话框

2 个答案: