Link to home
Create AccountLog in
Avatar of gdpotter
gdpotter

asked on

jQuery Binding in Nested Lists

I have some nested ul's and I have a short script that binds to the click event and then alerts the ID like follows:
$('li').each(function(){
    $(this).bind('click', function() {
        alert('You clicked on: ' + $(this).attr('id'));
    })
})

Open in new window

The problem is that the nested ul's are in the li's and so when the user clicks on one of the items in the nested list, two popups appear.

I need to either only bind to the non-ul items in the li, or somehow wrap the text in a span or something which would be easier to bind to.  It should be noted that some of the items have HTML items in it such as images, and what I really need to do is to bind to EVERYTHING EXCEPT the nested list.  Also, I don't want to stop the second alert from appear because, as you can imagine, the actual project doesn't actual alert the list item's id.

Thanks!
ASKER CERTIFIED SOLUTION
Avatar of dirknibleck
dirknibleck

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of gdpotter
gdpotter

ASKER

I ended up using stopPropagation because I did want the nested li's to alert as well, which is why I just had it as $('li').  Thanks!