Question

我的页面上有一个锚标记，用于在活动和已取消的实体之间切换。根据用户想要查看的内容，一次只显示一个链接。我用ajax用活动信息或取消信息替换html。见下文。

我遇到的问题是，当用户点击链接时，应显示加载对话框，但对话框仅在第一次点击时显示，而不是后续点击。这只发生在Chrome中。

$(document).ready(function() {
    $("a#showCancelled, a#showActive").live("click", function(event) {
        event.preventDefault();
        $("#dialog-modal").dialog('open');
        $.ajax({
            type: "GET",
            url: $(this).attr("href"),
            dataType: "html",
            cache: false,
            success: Success,
            error: Error
        });
    });

    $("#dialog-modal").dialog({
         autoOpen: false,
         height: 50,
         width: 400,
         modal: true,
         closeOnEscape: false,
         draggable: false,
         resizable: false
    });
});

function Success (data, status) {
    $("#dialog-modal").dialog('close');
    $("body").html(data);
}

HTML

<div id="dialog-modal" title="Loading...">
    <p><img src="../images/busy.gif" /> Just a moment...</p>
</div>

编辑 - 我已将代码更改为以下建议，并使用虚拟<div>包装了我想要更新的内容。但是现在对话框根本没有打开，并且在IE7中更新内容时没有显示任何内容。

$("a#showCancelled, a#showActive").live("click", function(event) {
    event.preventDefault();
    $link = $(this).attr("href");
    $("#dialog-modal").dialog('open');
    $("#dummy").load($link + " #dummy");
    $("#dialog-modal").dialog('close');
});

Answer 1

您正在用以下内容替换<body>元素的内容：

$("body").html(data);

这会破坏页面内的任何对话框或任何内容......你是否想将响应粘贴在另一个容器中，或许是这样的？

$("#result").html(data);

如果不是，您需要在设置<body>内容后重新运行对话框创建部分：

$("#dialog-modal").dialog({ ...options... });

或者在每次点击时创建它，然后先调用.dialog('destroy')，尽管这样会更浪费。

jquery ui loading对话框点击只触发一次

1 个答案: