Question

我认为我这样做是对的，但两个按钮实际上都没有关闭。无论是我是盲人还是缺少一个微妙的。

HTML

<div id="sample-dialog" title="New Effect"></div>
<button>Button</button>

JS

$(document).ready(function () {
    $(function () {

        $(function () {
            $("button")
                .button()
                .click(function (event) {
                event.preventDefault();
                $("#sample-dialog").dialog("open");
            });
        });

        $("#sample-dialog").dialog({
            autoOpen: false,
            height: 200,
            width: 200,
            modal: true,
            buttons: {
                "Close by $(#id)": function () {
                    $("#sample-dialog").dialog("close");
                },
                    "Close by $(this)": function () {
                    $(this).dialog("close");
                }
            }
        });

    });

});

我开始尝试关注和修改this sample。

Answer 1

显然在$(function() {...})中包装按钮单击处理程序会导致在创建对话框的函数之后执行该处理程序。对话框中的按钮是<button> s，因此单击它们会关闭对话框，但单击处理程序会立即重新打开对话框。它没有额外的$(function() {...})，但无论如何都不需要：

http://jsfiddle.net/nLvwp/

$(document).ready(function () {
    $("button")
        .button()
        .click(function (event) {
        event.preventDefault();
        $("#sample-dialog").dialog("open");
    });

    $("#sample-dialog").dialog({
        autoOpen: false,
        height: 200,
        width: 200,
        modal: true,
        buttons: {
            "Close by $(#id)": function () {
                $("#sample-dialog").dialog("close");
            },
                "Close by $(this)": function () {
                $(this).dialog("close");
            }
        }
    });
});

您还可以通过更具体地选择应该打开对话框的按钮来解决问题。但是单个$(document).ready(function{...})或$(function() {...})（做同样的事情）就足够了。

jQueryUI对话框不会关闭

1 个答案: