弹出jquery对话框

Question

嘿，我的 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

我能够通过注入另一个带有沙漏/旋转轮“请等待”加载图像的 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);
});

Answer 2

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