javascript - jQuery 自定义确认

Question

我想要一个非常简单的自定义对话框。当我单击“删除”时，我希望打开一个简单的面板，其中包含确认或取消的选项。如果得到确认，更多的事情将会运行。

由于我想在不同的文件中使用此确认，因此这是我的方法:

在我拥有的所有页面上运行的index.js中:

var confirmation = -1
$(document).ready(function(){
    $('html').on({
        click: function() {
            confirmation = 1;
        }
    },'#confirmation_yes');

    $('html').on({
        click: function() {
            confirmation = 0;
        }
    },'#confirmation_no');
});

function confirmAction(callback)
{
    if( confirmation == 1 ) {
        $('#popup_panel').slideUp('slow', function(){
            $('#popup_fader').fadeOut('fast');
        });
        confirmation = -1;
            callback(true);
    }
    if( confirmation == 0 ) {
        $('#popup_panel').slideUp('slow', function(){
            $('#popup_fader').fadeOut('fast');
        });
        confirmation = -1;
        callback(true);     
    }
    setTimeout(confirmAction, 50)
}

所以我的想法是，然后在其他 JS 文件中，我们有

$('#element').click(function(){
    confirmAction(function(result){
        // do my stuff
    });
})

所以当我这样做时，系统返回错误并说“回调”不是函数。这段代码有什么问题？

谢谢

Answer 1

我采取了另一种方法。它基于 jQueryMobile，但经过一些小的修改后也可以与普通 jQuery 一起使用。基本原理很简单:您调用一个函数来打开弹出窗口，并添加两个按钮，这些按钮对您通过调用 opener-function 提供的函数使用react。这是我的例子:

function jqConfirm(data) {
    var container = $('#genericConfirm');
    container.find('h1').html(data.title); // title of the confirm dialog
    container.find('p').html(data.message); // message to show
    // .off('click') removes all click-events. click() attaches new events
    container.find('.yes').off("click").click(data.yes); // data.yes/no are functions that you provide
    container.find('.no').off("click").click(data.no);
    container.popup({ positionTo: "window" }).popup("open"); // .popup("open") opens the popup
}
var confirmData = {
    title: "Send this message?",
    message: "Are you sure you want to send this message?",
    yes: function() {
        sendMessage();
        $('#genericConfirm').popup("close");
    },
    no: function() {
        $('#genericConfirm').popup("close");
    }
};
jqConfirm(confirmData); // you open the popup with this function (indirectly)

HTML 部分(特定于 jQueryMobile，必须稍作修改以匹配纯 jQuery)

<div data-role="popup" id="genericConfirm" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Title</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <p style="margin-bottom: 15px;">Message</p>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <a href="#" data-role="button" data-inline="false" data-theme="a" class="no">Cancel</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button" data-inline="false" data-theme="g" class="yes">Ok</a>
            </div>
        </div>
    </div>
</div>