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陷阱表單提交（）

回答

相關問題