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提交，但其他方法也有效）等等。

Answer 2

你可能不应该使用id来动态创建内容，因为你可能最终得到多个具有相同id的元素 - 这意味着document.getElementById（我假设sizzle用于#id选择器）只返回第一个（可能是不可见的）。

Answer 3

我需要一种方法来使用JSON Web服务来控制客户端的警报和更新，而无需客户端启动操作。我希望更新它以使用网络套接字，但是现在它是一个定时拉动，每次拉动包括下一次拉动的延迟，所以我甚至可以在客户端加载我的系统后管理它。

我也使用show / expire和moment.js按日期时间进行过滤，然后使用带有每个警报ID（此处未显示）的cookie来防止重复通知。这很顺利，如果我有足够的兴趣，我可能会在不久之后将其打包成一个库。

这个问题的具体位是2部分; 1）包含jQuery.dialog（）参数的JSON和2）使用该JSON并创建对话框的代码。这里的关键是要注意我如何引用'n'对象参数并使用它们动态创建对话框。 tDlg对象是其中很重要的一部分，因为它最终代表对话框并传递给$（）。dialog（）

包含我的对话框参数的JSON代码段：

"doAlert":{
                "modal":false
                ,"height":240
                ,"width":380
                ,"title":"Welcome to the new BatchManager"
                ,"body":"<div style='text-align:center;'>Welcome to the new and enhanced<br/>BatchManager!</div><div style='text-align:center;'>Enjoy!</div>"
                ,"buttons":[
                    {
                        "text":"Ok"
                        ,"click":"$(this).dialog('close');"
                    }
                ]
            }

JavaScript代码段（使用jQuery）基于我的JSON初始化对话框（n对应于doAlert，它是此示例中“通知”数组的一部分）：

var tDlg = {
    resizable: false,
    height: (n.doAlert.height) ? n.doAlert.height : 240,
    width: (n.doAlert.width) ? n.doAlert.width : 240,
    modal: (n.doAlert.modal) ? n.doAlert.modal : true,
    dialogClass: "dlgFont"
};
if (n.doAlert.buttons) {
    tDlg.buttons = [];
    $.each(n.doAlert.buttons, function (i, n) {
            tDlg.buttons.push({
                            text: n.text,
                            click: new Function(n.click)
                    })
    })
}
$('<div class="dlgFont" title="' + n.doAlert.title + '"><p><span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>' + n.doAlert.body + '</div>').dialog(tDlg);

Answer 4

要考虑几点：

OnDialogClose您应该从DOM中分离#MenuDialog以避免使用具有相同ID的多个对象，或者您可以在添加div#MenuDialog之前检查var Selector = $("a:contains('sometext')");是否存在。
$('#MenuDialog')是一条毫无意义的行，除非你在其他地方重复使用它。
您多次使用var Selector = $('#MenuDialog');。最好将其分配给变量，而不是重新查询{{1}}。

Answer 5

就个人而言，我是这样管理的：

1）构建对话框的html，其中两个跨度为xxx作为默认值

<div id="dialog1" title="Title of the dialog">
    <p>There are two variables: <span id="var1">xxx</span> and
    <span id="var2">xxx</span></p>
</div>

2）让div准备好成为一个对话框

$(function() {
    $( "#dialog1").dialog({
    autoOpen:false,
        modal: true,
        buttons: {
        "Button 1": function() {
            $(this).dialog( "close" );
        },
        "Button 2": function() {
            $(this).dialog( "close" );
        }
    }
    });
});

3）在启动对话框之前，使用此功能修改两个跨度的值：

function showDialog(value1,value2){
    $("#var1").html(value1);
    $("#var2").html(value2);
    $( "#dialog1").dialog('open');
}

4）所以当你需要它时，以这种方式调用函数

showDialog('tom','jerry');

您可以在http://jsfiddle.net/sekmo/L46vb/1/

尝试此操作

如何使用jQuery关闭对话框？

5 个答案: