jQuery陷阱表单提交（）答案

【问题标题】：Jquery trap form submit()jQuery陷阱表单提交（）
【发布时间】：2012-02-22 08:54:25
【问题描述】：

我目前正在使用 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();
    }
});

我明白为什么会发生这种情况，只是不确定解决它的最佳方法。我意识到我可以在按钮单击时显示模式，而不是表单提交，但这并不能解决用户点击键盘上的输入按钮提交表单的问题。

【问题讨论】：

非常有趣！我认为没有明显的解决方法，但我希望有人能证明我错了！您是否尝试过集成 preventDefault() 功能？

标签： jquery forms submit

【解决方案1】：

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

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

【讨论】：

太棒了，感谢您的解决方案。我今天学到了一些新东西 - unbind() 方法！
仅供参考，当用户单击“确定”时，这是与表单提交不同的事件，因此在“确定”按钮的处理程序中返回 false 并不重要。
@MelStanley - 是的，后来才意识到，但谢谢。从答案中删除了该部分。

【解决方案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;
},

【讨论】：

【解决方案3】：

您可以使用 jQuery 对象引用的 DOM 元素来提交表单，而不是使用 jQuery 对象来提交表单。这绕过了 jQuery 事件处理程序。您的 OK 函数如下所示：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：