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!
gdpotterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dirknibleckCommented:
You have a couple of options here:

1. If your root ul has an id or a class different from the nested uls, change your selector to only fire on the li's that are direct descendants of the ul:

$('ul#id > li').each(function(){
    $(this).bind('click', function() {
        alert('You clicked on: ' + $(this).attr('id'));
    });
});

2. You could use stopPropagation to prevent the event from bubbling to the second li:

$('li').each(function(){
    $(this).bind('click', function(event) {
        alert('You clicked on: ' + $(this).attr('id'));
        event.stopPropagation();
    });
});

However, this will cause it to fire back the id of the nested li, not the root (I believe).

Also, you can improve this code by doing the following (the .each is redundant...):

$('ul#id > li').click(function(event) {
      alert('You clicked on: ' + $(this).attr('id'));
});

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gdpotterAuthor Commented:
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!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.