Я пытаюсь создать довольно простое $.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);
});
});
Поскольку вы добавляете элементы динамически, попробуйте следующее:
$(document).on('click','#menu-container > ul > li > a',function() {
//code
});
Это распространенная проблема с содержимым, загруженным AJAX, поскольку старые обработчики больше не применяются к динамически добавленному контенту, если вы не используете делегирование событий, как показано выше.
Кроме того, вместо документа используйте селектор для закрытия родительского элемента из # menu-container> ul> li> a.