jQueryUI对话框在按钮单击时关闭答案

【问题标题】：jQueryUI Dialog box closing on Button ClickjQueryUI对话框在按钮单击时关闭
【发布时间】：2014-02-11 12:10:01
【问题描述】：

我正在尝试创建一个对话框，其中包含一些额外的交互性；即从多选中添加/删除选项。基本代码如下：

jQuery

$(document).ready(function() {
    $("#addCallDialogForm").dialog({
        autoOpen: false,
        model: true,
        width: 500,
        buttons: {
            "Add Call": function() {
                alert("Adding Call")

                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        },

        open: function(event, ui) {
            //Doing additional Stuff Here
        },

        close: function(event, ui) {
            //Doing additional Stuff Here Too
        }
    });

    $("#addBtn").click(function() {
        alert("button Clicked");
    });
});

HTML

<div id="addCallDialogForm" title="Add Call">
    <form>
        <fieldset>
            <button id="addBtn">Add</button>
        </fieldset>
    </form>
</div>

问题是，当我单击“添加”按钮时，会显示警报，但一旦单击确定，对话框就会关闭。我尝试使用 'beforeClose' 方法来指定何时关闭对话框，但这没有帮助。

谁能帮忙。提前致谢。

【问题讨论】：

正在调用哪个警报？
&你在对话框中打开弹出窗口吗？
警报只是通用代码，它们可以很容易地替换为“console.log”。当我单击添加时，我将选定的选项从一个多选移动到另一个。可行，但一旦移动完成，对话框就会关闭
你正在调用 $(this).dialog("close");这将关闭您的模型对话框。
@Parkask Kumar - 是的，我知道，但这只有在我单击“添加呼叫”或“取消”对话框按钮时才会执行。 “添加”按钮是我手动添加到对话框表单的标准 html 按钮。无论如何，我已尝试删除它们，但问题仍然存在。

标签： jquery html jquery-ui jquery-ui-dialog

【解决方案1】：

经过一些研究，我发现单击对话框中的任何按钮都会提交该表单。通过将event.preventDefault() 添加为所需方法中的第一行，按钮可以执行我想要的操作，而无需提交和关闭。