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

OK：

时应该返回false

$("#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;
},

Answer 3

我会使something成为命名空间全局，或者来自某些隐藏输入的值，如下所示：

var something = nameSpaced.something ||  $('#hiddenInput').val(); //your choice
if (something) {
    ...
} ...

那么你的逻辑应该正常工作。

Answer 4

虽然使用jQuery对象提交表单，但您可以使用jQuery对象引用的DOM元素来提交表单。这绕过了jQuery事件处理程序。你的OK函数看起来像这样：

"OK": function () {
    $dialog.dialog('close');
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit
    return false;
},

Jquery陷阱表单提交（）

4 个答案: