jquery對話框不保持打開表單元素

有沒有人知道爲什麼如果我嘗試將按鈕打開一個對話框（jQuery對話框小部件）在它彈出打開一秒鐘，然後關閉的形式？外面它工作得很好。jquery對話框不保持打開表單元素

所以，如果我把：

<form> 
<button id="opener">open the dialog</button> 
</form>

這似乎是提交表單，雖然形式有它自己的提交按鈕？

<button id="opener">open the dialog</button> 
<div id="dialog" title="Dialog Title">I'm a dialog</div> 
<script> 
$("#dialog").dialog({ autoOpen: false }); 
$("#opener").click(function() { 
$("#dialog").dialog("open"); 
}); 
</script>

有人能解釋爲什麼會發生這種情況嗎？我似乎很難理解爲什麼從表單元素中的按鈕打開會導致它無法工作？ :)

PS：我也試過把div放在窗體外面，但這沒什麼區別。如果按鈕在表單內。

來源

2013-09-29 Noodle Head

這是因爲你正在使用的按鈕標籤。每次單擊按鈕時，表單都會被取消，因爲按鈕位於表單範圍內。一種方法是按鈕標籤變成輸入型按鈕或嘗試像這樣使用純JS：

HTML：

<form> 
<button id="opener" onclick="return showPopup()">open the dialog</button> 
</form>

JS：

function showPopup(){ 
//code to show your dialog 
return false 
}

來源

2013-09-29 15:51:43

非常感謝 - 它工作:) ...如果你能解釋爲什麼在onclick返回的目的將是太棒了？再次感謝。 –

當您單擊窗體中的按鈕（只有按鈕標記不是輸入類型按鈕）時，表單會被提交。但是在提交表單前，如果在按鈕的點擊事件中指定了一些js代碼，首先js被執行並且表單被提交。這發生在你的情況。我們可以通過將false返回給調用事件來停止javascript內部的執行，或者像上面演示的那樣通過返回true來在一定條件下繼續執行。 –

嘗試打開該對話框，如下返回後從點擊處理程序錯誤：

$("#opener").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
});

這應該解決您的問題。

來源

2013-09-29 15:40:27 Rajesh

這是因爲按鈕的默認類型是submit，所以單擊它將始終提交表單並重新加載頁面。

更改按鈕類型，也不會提交表單：

<form> 
    <button id="opener" type="button">open the dialog</button> 
</form>

來源

2013-09-29 15:40:34 adeneo

謝謝你的回覆 - 嘗試過，但它仍然不能在窗體內工作.. –

當然它工作 - > http://jsfiddle.net/GYsfx/ ??? – adeneo

jquery對話框不保持打開表單元素

回答

相關問題