jQuery event not triggered

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><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>

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?

Did you put this jquery code on the callback of the ajax call? — Felipe Castro
– Felipe Castro, Commented Feb 9, 2012 at 16:00
No. The jquery code is in the main page. How do I put in the callback? — ptamzz
– ptamzz, Commented Feb 9, 2012 at 16:09
I put the jquery scripts in the ajax returned markup along with the li item here but still the same issue. — ptamzz
– ptamzz, Commented Feb 9, 2012 at 16:13
That seems to work: jsbin.com/ijiqec/edit#javascript,html,live (tested on Chrome). Is this problem happening on all browsers? — Felipe Castro
– Felipe Castro, Commented Feb 9, 2012 at 17:13
I found something out. I'm using this JS Twitter Bootstrap plugin at twitter.github.com/bootstrap/javascript.html#dropdowns. If I remove it, it works fine. So there must be a conflict. — ptamzz
– ptamzz, Commented Feb 9, 2012 at 17:38

Felipe Castro · Accepted Answer · 2012-02-09 17:55:50Z

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',...

edited Feb 9, 2012 at 17:55

answered Feb 9, 2012 at 16:51

Felipe Castro

1,61311 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ptamzz Over a year ago

Thanks a lot. It works. But I had to put the js scripts in the user-bar.php file.

Stelian Matei · Accepted Answer · 2012-02-09 16:12:20Z

1

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(){ ... })

edited Feb 9, 2012 at 16:12

answered Feb 9, 2012 at 15:56

Stelian Matei

11.6k3 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery event not triggered

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related