Question

我正在尝试构建一个包含一些标签的网页，通过点击标签，它将使用AJAX加载标签下方的内容。

问题：在旧版本的Internet Explorer中，单击选项卡将导致重定向到选项卡链接，而不是通过AJAX加载该链接后面的内容。

我的HTML代码：

<ul id="nav">
  <li><a href="page_1.html">Page 1</a></li>
  <li><a href="page_2.html">Page 2</a></li>
  <li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

我的Jquery代码：

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({
            url: this.href,
            success: function(html) {
                $("#ajax-content").empty().append(html);
            }
        });
        return false;
    });
});

Answer 1

如您所知，点击处理程序末尾的return false;应停止冒泡并阻止默认操作。但是，当然，如果你从未到达那里，那么默认将继续。

所以问题必须是：你是否已经使用调试器浏览代码，看看它是否会抛出错误和/或选择器应该匹配的所有内容是否匹配？我的猜测是，由于某种原因，点击处理程序中的某些内容因IE而失败，因此您的return false没有发生，或者（当然）点击处理程序根本没有被触发。多年来，IE上有几个脚本调试器，最近一个是免费的Visual Studio Express。

用于查找仅在IE上发生的错误的一个特别丰富的区域是其命名空间问题，特别是因为您说这发生在IE的“较旧”版本上。 this blog post中的详细信息，但基本上一直通过IE7 IE将几个名称空间完全区分开来（例如，它将所有id和name值视为在同一名称空间中，所以如果你有一个name="foo"元素和另一个元素id="foo"，那么IE会感到困惑）。这个混合使用的命名空间会影响你的jQuery选择器，因为使用ID的jQuery选择器最终使用内置的document.getElementById，IE（6和7）使用该函数的混合命名空间。

Answer 2

我相信在点击处理程序的末尾添加event.stopPropagation()（你还需要引用event作为处理程序参数：$("#nav li a").click(function(event) {...});）就可以了。

IE：AJAX选项卡不起作用

2 个答案: