Элемент HTML скрывается по клику после $ .get ()

0

Я пытаюсь создать довольно простое $.get() меню для загрузки некоторых страниц в div с помощью $.get() в jQuery. Все работает по назначению, за исключением одного вопроса. Когда HTML- $.get() загружен успешно с помощью $.get(), любой щелчок по основной ссылке для сверления, отличной от ссылки в активном элементе списка, приводит к тому, что в #menu-list скрывается display: none; , Я уверен, что здесь я пропустил что-то очень простое, но, похоже, я не вижу ошибки.

Вот мой HTML:

<div id="menu-container">
    <ul id="menu-list">
        <li class="main-drill">
            <a href="/somepage">Main Drill 1</a>
        </li>
        <li class="main-drill">
            <a href="#">Main Drill 2</a>
            <ul>
                <li class="sub-drill"><a href="/somepage">Sub Drill 1</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 2</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 3</a></li>
            </ul>
        </li>
        <li class="main-drill">
            <a href="#">Main Drill 3</a>
            <ul>
                <li class="sub-drill"><a href="/somepage">Sub Drill 1</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 2</a></li>
                <li class="sub-drill"><a href="/somepage">Sub Drill 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="main-content">
    The main HTML content is displayed here.
</div>

Мой код jQuery:

$('#menu-container > ul > li > a').live('click', function(e) {
    var url = $(this).attr('href');

    if (url == '#') {
        var parentElement = $(this).parent();
        var checkElement = $(this).next();

        $('#menu-container li').removeClass('active');
        $(this).closest('li').addClass('active');

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            parentElement.children('ul').slideUp('normal');
        }

        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu-container ul ul:visible').slideUp('normal');
            parentElement.children('ul').slideDown('normal');
        }

        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    }
});

$('#menu-container > ul > li > ul > li > a').live('click', function (e) {
    e.preventDefault();
    var url = $(this).attr('href');

    $.get(url, function (response) {
        $('#main-content').html(response);
    });
});
Теги:

1 ответ

1
Лучший ответ

Поскольку вы добавляете элементы динамически, попробуйте следующее:

$(document).on('click','#menu-container > ul > li > a',function() {

//code

});

Это распространенная проблема с содержимым, загруженным AJAX, поскольку старые обработчики больше не применяются к динамически добавленному контенту, если вы не используете делегирование событий, как показано выше.

Кроме того, вместо документа используйте селектор для закрытия родительского элемента из # menu-container> ul> li> a.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню