Событие jQuery не активировано

Question

У меня есть этот кусок разметки. Этот кусок загружен через ajax и добавлен внутри div.

Содержание файла user-bar.php:

<div id="u-bar"> 
    <ul id="u-nav" class="nav"> 
     <li id="notifications-list" class="dropdown" data-time="" > 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      <i class="icon-comment"></i> 
      Notifications 
      <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu" > 
       <li><a href="#">Notification One</a></li> 
       <li><a href="#">Notification two</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Show All Notifications</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      <i class="icon-user"></i> 
      Profile 
      <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">View Profile</a></li> 
      <li><a href="#">Settings</a></li> 
     </ul> 
    </li> 
    <li><a href="php/logout.php">Logout</a></li> 
    <div class="clear"></div> 
    </ul> 
</div> 

Я scripts.js файла, как показано ниже, который включен в файле index.php в <script type="text/javascript" src="js/scripts.js"></script>

$(function(){ 
    loadUserBar(); 

    $('#notifications-list').live('click', function(){ 
     console.log('Test'); 
     $('#notifications-list .icon-comment').removeClass('new'); 
    }); 
}); 

function loadUserBar(){ 
    $('#user-area').load('php/user-bar.php', function(){ 
     initBootstrapElems(); //Initializing All popover elements 
    });  
} 

index.php файла имеет div#user-area где Аякс возвращаемых разметок вставлено.

После того, как вся страница была загружена, когда я нажимаю на элемент списка #notifications-list, ничего не происходит. Но когда я набрал $('#notifications-list').click() непосредственно в консоли, журнал появляется и появляется removeClass.

Что может быть неправильным здесь?

Answer 1

Вы правы, есть конфликт с ниспадающей начальной загрузкой (смоделировано в http://jsbin.com/ijiqec/2/edit).

По какой-то причине (не спрашивайте меня, почему) изменение использования живого по на исправили проблему. Используйте этот кусок кода:

$('#notifications-list').on('click',...

Answer 2

Попробуйте поместить обработчик для щелчка по событию тега.

$('#notifications-list a').live('click', function(){ ... }) 

Update: Вы не можете использовать один и тот же идентификатор для всех тегов Li. Вы должны изменить литиева # уведомления-список класса, если у вас есть, что на каждую метку, а затем обновить ЯШИ:.

$('.notifications-list a').live('click', function(){ ... })