IE: вкладки AJAX не работают

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. Подробности в этом посте , но в основном в IE7 IE объединяет несколько пространств имен, которые должны быть совершенно разными (например, он обрабатывает все значения id и name как находящиеся в одном и том же пространстве имен , так что если у вас есть элемент с name="foo" и другой элемент с id="foo", IE запутается). Это пространство имен, объединенное в пюре, повлияет на ваши селекторы jQuery, так как селекторы jQuery, которые используют идентификаторы, в конечном итоге используют встроенный document.getElementById, а IE (6 и 7) использует пространство имен, которые содержат растирание с этой функцией.

Answer 2

Я полагаю, что добавление event.stopPropagation() в конец обработчика щелчка (вам также необходимо указать event в качестве аргумента обработчика: $("#nav li a").click(function(event) {...});) поможет.