javascript - 嵌套 div 中的 Ajax 调用不适用于带有 MVC3 的 FireFox

Question

我有一个带有链接的 cshtml 页面和一个用于显示一些内容的 div。

<a href="#" onclick="Show_New_Page('#First_Div')>My Link</a>

<div id="First_Div">
    @Html.Partial("General_Page") <- This is the default page that gets displayed on load.
</div>

当您单击链接时，将调用 JavaScript 函数 Show_New_Page 并将字符串“#First_Div”作为参数传递。我传递了我希望 Show_New_Page 中的 ajax 放置其成功值的 div 名称。该函数如下所示:

function Show_New_Page(div) {
    $.ajax(
    {
        type: "POST",
        url: url, //Declared above globally, unimportant
        data: data, //Declared above globally, unimportant
        success: function (result) {
            $(div).html(result);
        }
    });
}

当您在 Internet Explorer 中单击此链接时，新页面会正常显示，没有任何问题。但是，当您在 FireFox 中单击此链接时，整个页面会变成白色并且无法成功加载。

有很多关于 Ajax 和不同浏览器问题的帖子，但我找不到对我有帮助的帖子。非常感谢我可以尝试的任何提示或技巧。我非常不确定为什么会发生这种情况，所以如果我遗漏了任何信息，我一定会尽力提供。

Answer 1

当您调用 Show_New_Page 函数时，似乎缺少结束 )。另外，建议从点击处理程序返回 false 以取消默认操作:

<a href="#" onclick="Show_New_Page('#First_Div'); return false;">My Link</a>

此外，您可能更愿意为该 anchor 指定一个 ID:

<a href="#" id="myLink" data-id="#First_Div">My Link</a>

然后以不显眼的方式将其 AJAX 化到一个单独的文件中，以避免将标记与 javascript 混合:

$(function() {
    $('#myLink').click(function() {
        $.ajax({
            type: 'POST',
            url: url, //Declared above globally, unimportant
            data: data, //Declared above globally, unimportant
            context: { id: $(this).data('id') },
            success: function (result) {
                $(this.id).html(result);
            }
        });
        return false;
    });
});