0

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

4

3 回答 3

2

打开对话框后,尝试从单击处理程序返回 false,如下所示:

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

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

于 2013-09-29T15:40:27.430 回答
1

那是因为按钮的默认类型是submit,所以点击它总是会提交表单并重新加载页面。

更改按钮类型,它不会提交表单:

<form>
   <button id="opener" type="button">open the dialog</button>
</form>
于 2013-09-29T15:40:34.367 回答
1

这是因为您使用的按钮标签。每次单击按钮时,都会提交表单,因为该按钮位于表单范围内。一种方法是将按钮标签更改为输入类型按钮或使用纯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-29T15:51:43.610 回答