如何使用jQuery关闭对话框？

Question

我正在使用下面的代码动态创建一个jQuery UI Dialog小部件:

 $(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 Dialog正常工作,当我点击btnCloseDialog时,jQuery Dialog成功关闭.

但是,之后,btnCloseDialog不再关闭对话框.为什么会这样？

更新

我把我的代码放在jsfiddle上.

这是一种奇怪的行为,因为该按钮在jsFiddle中正确关闭了对话框,但在我的项目中没有关闭对话框.

Answer 1

因为这在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,
            title: "title",
            show: 'clip',
            hide: 'clip',
            buttons: [
                {text: "Submit", click: function() {doSomething()}},
                {text: "Cancel", click: function() {$(this).dialog("close")}}
            ]
        });
        return false;
    });
});

我还展示了如何将多个按钮与内联函数放在一起,而不是将live()函数附加到按钮上.我已经在几个地方使用过这种方法,它对我很有用.它还支持表单(我抓住doSomething()中的数据并通过ajax提交,但其他方法也有效),等等.