如何使用jQuery关闭对话框? [英] How do I close a dialog using jQuery?

问题描述

我正在使用以下代码动态创建jQuery UI对话框小部件:

I am using the code below to create a jQuery UI Dialog widget dynamically:

 $(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对话框成功关闭.

First time it loads, the jQuery Dialog works correctly and when I click on the btnCloseDialog the jQuery Dialog closes successfully.

但是，此后，btnCloseDialog不再关闭对话框.为什么会这样?

However, after that, the btnCloseDialog no longer closes the dialog. Why is this happening?

更新

我将代码放到 jsfiddle 上.

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

This is strange behavior because the button closes the dialog properly in the jsFiddle, but not on the dialog in my project.

推荐答案

由于这在使用jquery创建动态对话框的搜索中就已经显示出来了，所以我想指出一种更好的方法.与其将对话框的div和内容添加到HTML中然后再调用它，您还可以通过将HTML直接推入jquery对象中来更加轻松地做到这一点，例如:

Because this shows up early in the search for creating a dynamic dialog in jquery, I'd like to point out a better method to do this. Instead of adding your dialog div and content to the HTML and then calling it, you can do this much more easily by shoving the HTML directly into a jquery object, as so:

$(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提交，但其他方法也可以)等.

I've also showed how you can put multiple buttons with inline functions, instead of attaching a live() function to the button. I've used this method in a couple of places and it works great for me. It also supports forms (I grabbed the data in doSomething() and submitted through ajax, but other methods work too), etc.

这篇关于如何使用jQuery关闭对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！