Question

hey frenz我的jquery-ui对话框有问题。问题是，当我关闭对话框然后单击触发它的链接时，它不会再次弹出，除非我刷新页面或保存对话框中的任何数据。

我使用的代码是：

<script type="text/javascript"> 

    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        close: function () {
                            $(this).remove();
                        },
                        modal: true
                    })
                    .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

Answer 1

@MattBradley说的是什么。
在此行.attr("id", $(this).attr("data-dialog-id"))中，您试图获取新的<div> data-dialog-id属性，并指定新的<div>＆＃ 39;是id属性。我确定您打算将链接的data-dialog-id属性分配给新的<div>。
close: function() { $(this).remove(); }是多余的。除非您的意思是＆＃34;删除链接＆＃34;，而不是对话框本身，在这种情况下，您将使用link而不是this（请参阅fiddle）。
＆＃34;从jQuery 1.7开始，不推荐使用.live（）方法。使用.on()附加事件处理程序。旧版jQuery的用户应优先使用.delegate()而不是.live（）。＆＃34; 来自jQuery＆＃39; live()文档。

$('body').on('click', '.openDialog', function (e) {
    e.preventDefault();

    var link = $(this);

    $("<div></div>")
        .addClass("dialog")
        .attr("id", $(link).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            modal: true
        })
        .load($(link).attr('href'),  {
            html: "<p>Text echoed back to request</p>"
        });
});

$('body').on("click", '.close', function (e) {
    e.preventDefault();
    $(this).closest(".dialog").dialog("close");
});

在此演示： http://jsfiddle.net/Ag6wj/

Answer 2

我能够通过注入另一个带有沙漏/旋转轮“请等待”加载图像的div来使其工作。（我正在使用jquery-1.7.1）

尝试替换此行：

$("<div></div>")

有了这个：

$("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>")

这是我的工作代码（与原始帖子完全相同，除了一行）：

// these are for the popup dialogs
// need to use live instead of click because object doesnt exist on ready and will give an objectexpected
$(".openDialog, .editDialog").live("click", function(e) {
    e.preventDefault();

    // this div is duplicate of 'loading' div below
    $("<div><div style='text-align: center'><img src='@Url.Content("~/Content/images/loading.gif")' alt='Please Wait...' width='100px'/></div></div>")
        .addClass("dialog")
        .attr("id", $(this).attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
            // NOTE: This is where the size of the popup window is set
            width: 800,
            position: 'top',
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove(); },
            modal: true
        })
        .load(this.href);
});

弹出jquery对话框

2 个答案: