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 提供的函数做出反应。这是我的例子：

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>

Answer 2

将另一个处理程序附加到处理逻辑的按钮。完成对话框后，只需删除对话框即可摆脱处理程序。如果您稍后创建另一个对话框，可能具有相同或其他布局，您可以为该对话框定义不同的处理程序。随着事件“冒泡”，按钮本身的处理程序和 html 上的处理程序（仅在单击按钮时触发）都将被触发。

以下只是伪代码，但它应该让你知道你可以用它做什么：

//This will create the html for your dialog
createMyFancyDialog();
showDialog();

//This is where you'll do the logic for this dialog
$('#confirmation_yes').on( 'click', function() {
    doWhatEveryIWantToDo();

    //After this dialog is done, destroy the dialog.
    //This will get rid of the handlers we don't need in a future dialog.
    //The handler attached to html will persist.
    destroyDialog();
} );
$('#confirmation_no').on( 'click', function() {
    doSomethingMean();

    //After this dialog is done, destroy the dialog.
    //This will get rid of the handlers we don't need in a future dialog.
    //The handler attached to html will persist.
    destroyDialog();
} );

Answer 3

我已经尝试重写和修复您的代码，但是要调整的东西太多了。

因此，我强烈建议您以更简单的方式重写代码，如下所示：

<button id="element">Element</button>
<div id="popup_panel" style="display: none;">
  <p>Your msg?</p>
  <button id="confirmation_yes" >Yes</button>
  <button id="confirmation_no">No</button>
</div>

<script>
$(document).ready(function () {
  $('#confirmation_yes').click(actionConfirmed);
  $('#confirmation_no').click(actionNotConfirmed);
  $('#element').click(showPopupPanel);
});

function actionConfirmed() {
  $('#popup_panel').slideUp();

  // User confirmed. Now continue.
  // e.g. alert('Yes was clicked');
}

function actionNotConfirmed() {
  $('#popup_panel').slideUp();

  // User said no.
}

function showPopupPanel() {
  $('#popup_panel').slideDown();
}
</script>

您可以在此处查看此代码的运行情况： http://jsfiddle.net/LGTSK/

Answer 4

保持简单：

<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <input id='yes' type="button" value="Yes" data-result="Yes" />
    <input id='no' type="button" value="No" data-result="No" />

    <script type="text/javascript">
    var result;
    function confirmAction() {
        if (result)    alert(result);
        else           setTimeout(confirmAction, 100);
    }

    $(function() {
        $('#yes, #no').on('click', function(e) {
            result = $(this).attr('data-result');
        });

        confirmAction()
    });
    </script>
</body>
</html>