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
}

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

3 个答案: