JQuery：无法在 post() 方法中重新启用 preventDefault()

Question

我已阅读此thread 以在提交方法上重新启用 preventDefault()。但这对我的情况不起作用。我尝试使用$(this).unbind('submit').submit() 再次启用它。我把它放在 POST 方法中，在打开 JQuery Colorbox 对话框之前。在该对话框中，还有一个提交按钮，但也无法单击该按钮。所以我必须重新启用preventDefault()，这样才能点击按钮。

$("#Username, #Password").keypress(function(e){
    if (e.which == 13 ) {
        $("form:first").submit(function(e){ 
            e.preventDefault(); //interrupt submit process
            var userdata = {username : $("#Username").val() };
                $.ajax({
                  type: 'POST',
                  url: 'http://localhost/test/test.php',
                  data: userdata,
                  success: function(data){  
                          if(data==0){                                      
                                $(this).unbind('submit').submit(); //enable it again(but it didn't worked!)
                                $.fn.colorbox({width:"50%", inline:true, href:"#reminder_dialog" })} //JQuery Colorbox opened.
                            else { 
                                $(this).submit();                               
                            }
                        },              
                  async:false
            });
        });
    }               
 });    

我也已经尝试过使用 $(this).trigger('submit') 和 $(this).get(0).allowDefault = true ，但这些也没有用。

Answer 1

我会把钱放在 e 代表按键事件，然后变成提交事件的事实上。

我真的只是在头顶上说这句话，夜晚很长，但是尝试将提交的参数 e 更改为其他内容（如 ev）并在 ev 上调用 preventDedault，如下所示：

....
$("form:first").submit(function(ev){ 
ev.preventDefault(); //interrupt submit process
....

或者你也可以使用 return false;在提交功能结束时。 见：event.preventDefault() vs. return false

Answer 2

那么，要保护表单表单重复提交吗？您只需绑定一次提交事件。

$("form:first").submit(function(e) {
    e.preventDefault(); //interrupt submit process

    var $this = $(this); // Form jQuery object

    if ($this.data('busy')) return; // Protect this form from double submitting

    $this.data('busy', true); // Set the form as busy (we are sending something now)

    var userdata = {
          username: $("#Username").val()
        };

$.ajax({
    type: 'POST',
    url: 'http://localhost/test/test.php',
    data: userdata,
    success: function(data) {

        $this.data('busy', false); // Form is not busy anymore

        if (data == 0) {
            // Do your stuff. I don't understand what do you need here.
        } else {
                      // Do your stuff. I don't understand what do you need here.
        }
    },
    async:false
});
});

而且，如果您使用<input> 字段，您不必为此编写任何代码，当您按 ENTER 时，它们会提交表单。但以防万一：

$("#Username, #Password").keypress(function(e) {
    if (e.which == 13) {
        $("form:first").submit();
    }
});

更新 好吧，那你就得把表单提交状态存起来。

$("form:first").submit(function(e) {
    e.preventDefault(); //interrupt submit process

    var $this = $(this); // Form jQuery object

    var state = $this.data('state');

    if (state == 'busy') {
        return;
    } else if (state != 'colorbox') {
        // Set the state that we are showing colorbox
        $this.data('state', 'colorbox');

        // Show your colorbox or whatever
        // ...

        return;
    }

    $this.data('state', 'busy');

    // Submit with that AJAX code
    // ...
});

您可以像这样从任何地方设置提交状态：

$("form:first").data('state', 'chilling');

您可以像这样从任何地方提交表单：

$("form:first").submit();