Jquery陷阱表单提交()

Question

我目前正在使用jquery来捕获表单的提交,并向用户显示一个确认对话框.如果用户单击是,则表单应提交.如果用户单击否,则关闭对话框.

这一切都运行良好,但有一个问题:当用户单击是时,这会再次触发相同的代码,并重新打开对话框.

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

我理解为什么会这样,只是不确定最好的方法来解决它.我意识到我可以在按钮点击时显示模态,而不是表单提交,但这并没有解决用户点击键盘上输入按钮提交表单的问题.

Answer 1

因为当你submit表单时,submit事件再次触发,因此事件处理程序.您需要unbind的submit时候用户说事件处理程序OK.试试这个

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    //Check this line - unbinding the submit event handler
                    $("#myform").unbind('submit').submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

Answer 2

你应该在以下时间返回false OK:

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return false; // <=== not just return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

或删除手动提交:

buttons: {
"OK": function () {
    $dialog.dialog('close');
    //$("#myform").submit();  <-- delete it
    return;
},