javascript - 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

这是因为您使用的按钮标签。每次单击按钮时，都会提交表单，因为该按钮位于表单范围内。一种方法是将按钮标签更改为输入类型按钮或使用纯js尝试这样：

html:

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

js：

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