如何使用jQuery关闭对话框?

前端之家收集整理的这篇文章主要介绍了如何使用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.f2er.com/jquery/183527.html

猜你在找的jQuery相关文章