Jquery陷阱表单提交（）

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

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

$("#myform").submit(function (event) { if (something) { var $dialog = $('
').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事件会再次触发，因此事件处理程序也会触发。 当用户说OK时，您需要unbind submit事件处理程序。 试试这个

 $("#myform").submit(function (event) { if (something) { var $dialog = $('
').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 = $('
').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

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

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

Answer 4

我会创建一个命名空间全局或某些隐藏输入的值，如下所示：

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

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