jQuery对话框不会在表单元素中保持打开状态

Question

有人知道为什么我尝试将按钮打开的对话框（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放在表格之外，但这没什么区别。 如果按钮在表单内。

Answer 1

打开对话框后，尝试从点击处理程序返回false，如下所示：

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

这应该可以解决您的问题。

Answer 2

那是因为按钮的默认类型是submit ，所以单击它将始终提交表单并重新加载页面。

更改按钮类型，它将不会提交表单：

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

Answer 3

这是因为您正在使用按钮标签。 每次单击按钮都会提交表单，因为按钮在表单范围内。 一种方法是将button标记更改为输入类型的button或使用纯js尝试如下操作：

HTML：

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

JS：

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