jquery陷阱表单提交（）

我目前使用jquery来捕获表单的提交并显示用户确认对话框。如果用户点击是，则表单应提交。如果用户单击否，则关闭对话框。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(); 
    } 
});

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

来源

2012-01-30 JonoB

非常有趣！我不认为有一个明显的方法，但我希望有人能证明我错了！你尝试过整合'preventDefault（）'功能吗？ – 2012-01-30 15:09:46

因为当你submit形式的submit事件再等等触发事件处理程序。当用户说OK时，您需要unbindsubmit事件处理程序。试试这个

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

来源

2012-01-30 15:12:21 ShankarSangoli

真棒，感谢解决方案。我今天学到了一些新东西 - unbind（）方法！ – JonoB 2012-01-30 15:21:37

仅供参考当用户点击“确定”时，这是与提交表单不同的事件，因此返回false在“确定”按钮的处理程序中并不重要。 – 2012-01-30 15:43:08

@MStStanley - Yup后来意识到了，但谢谢。从答案中删除了该部分。 – ShankarSangoli 2012-01-30 15:43:51

你应该返回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; 
},

来源

2012-01-30 15:09:11 gdoron

我会做something无论是命名空间的全球性，或价值从一些隐藏的输入，像这样：

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

您的逻辑应正常工作即可。

来源

2012-01-30 15:13:10 pete

使用jQuery对象提交表单的Intstead，你可以使用DOM元素的jQuery对象是指提交表单。这绕过了jQuery事件处理程序。你OK功能应该是这样的：

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

来源

2012-01-30 15:18:12

jquery陷阱表单提交（）

回答

相关问题