如何使用jQuery关闭对话框？

我正在使用下面的代码动态地创建一个jQuery UI对话框小部件：

$(function () {
        var Selector = $("a:contains('sometext')");
        $(Selector).bind('click',function () {
            var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
            var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
            $('body').append(NewDialog);
            $('#MenuDialog').html(DialogContetn);
            $('#MenuDialog').hide();
            $('#MenuDialog').dialog({ modal: true,title: "title",show: 'clip',hide: 'clip' });
            $("#btnCloseDialog").live('click',function () {
                $("#MenuDialog").dialog('close');
            });
            return false;
        });
    });

第一次加载时，jQuery对话框工作正常，当我点击btnCloseDialog时，jQuery对话框成功关闭。

但是，之后，btnCloseDialog不再关闭对话框。为什么会发生这种情况？

更新

我把代码放在了jsfiddle上。

这是奇怪的行为，因为按钮在jsfiddle中正确关闭对话框，而不是在项目中的对话框上。

解决方法

因为在jquery中搜索创建一个动态对话框的早期，我想指出一个更好的方法来做到这一点。而不是将对话框div和内容添加到HTML，然后调用它，您可以通过将HTML直接推送到jquery对象中来更轻松地执行此操作，如下所示：

$(function () {
    $("a:contains('sometext')").click(function() {
        var NewDialog = $('<div id="MenuDialog">\
            <p>This is your dialog content,which can be multiline and dynamic.</p>\
        </div>');
        NewDialog.dialog({
            modal: true,hide: 'clip',buttons: [
                {text: "Submit",click: function() {doSomething()}},{text: "Cancel",click: function() {$(this).dialog("close")}}
            ]
        });
        return false;
    });
});

我还展示了如何使用内置函数放置多个按钮，而不是在按钮上附加一个live()函数。我在几个地方使用过这个方法，它对我来说很好。它还支持表单(我抓取了doSomething()中的数据并通过ajax提交，但是其他方法也是这样)等等

原文地址：https://www.jb51.cc/jquery/183527.html