Изменение элемента списка HTML для активного в navbar

Question

Я загружаю свой navbar на каждую страницу с $("#navbar-partial").load("navbar.html) внизу страницы в тегах скриптов.

навигационной панели Список кодов ниже:

<ul id="main-nav" class="nav nav-sidebar"> 
    <li> 
    <a href="a.html"></a> 
    </li>      
    <li> 
    <a href="b.html"></a> 
    </li> 
    <li> 
    <a href="c.html"></a> 
    </li> 
    <li> 
    <a href="d.html"></a> 
    </li> 
</ul> 

Ive пытался это и некоторые вариации этого, но не могу заставить его работать:

$(document).ready(function() { 
    $('.nav li').on('click', function (e) { 
     $(this).addClass('active').siblings().removeClass('active'); 
    }); 
}); 

Это в том же тег сценария в нижней части страницы html, после вызова загрузки.

Любые идеи?

Благодаря

Answer 1

Поскольку содержание не присутствует в DOM готов (учитывая асинхронный характер Ajax), вы должны будете использовать on() связать click обработчик предка элемента, который присутствует в DOM в точке DOM готовый элемент с id="navbar-partial", в который вы загружаете новое содержание:

// selecting the element present on DOM-ready: 
// binding the 'click' event that's fired on elements 
// matching the '.nav li' selector: 
$('#navbar-partial').on('click', '.nav li', function (e) { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

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

Ссылки:

• on().

Answer 2

Вы должны использовать делегирование

$(document).on('click', ".nav li", function(e) { 
     $(this).addClass('active').siblings().removeClass('active'); 
    });