jQuery event not triggered - ajax

Question

I've this piece of markup. This piece has been loaded through ajax and appended inside a div.
Content of file 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>Notification One</li>
<li>Notification two</li>
<li class="divider"></li>
<li>Show All Notifications</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>View Profile</li>
<li>Settings</li>
</ul>
</li>
<li>Logout</li>
<div class="clear"></div>
</ul>
</div>
I've scripts.js file as below which is included in the index.php file as <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 file has the div#user-area where the ajax returned markup is inserted.
After the whole page has been loaded, when I click on the list-item #notifications-list, nothing happens. But when I typed in $('#notifications-list').click() directly in the console, the log does appears and the removeClass does occur.
What could be wrong here?

Answer 1

You're right, there's a conflict with dropdown bootstrap (simulated at http://jsbin.com/ijiqec/2/edit).
For some reason (don't ask me why) changing the use of live by on fixed the issue.
Use this piece of code:
$('#notifications-list').on('click',...

Answer 2

Try to put the handler for click on the a tag event.
$('#notifications-list a').live('click', function(){ ... })
Update:
You can't use the same id for all li tags.
You need to change the li.#notifications-list to a class if you have that on each tag and then update the js:
$('.notifications-list a').live('click', function(){ ... })