Jquery Functions in Unordered List

Question

I have list items in an unordered list that are calling functions via jquery click events. The problem is the li is calling its function then calling the parent ul function. I just want the function called that I am referencing with the id. Is it a parent-child issue?

<ul id="mainlist">
  <li id="item1">list1</li>
  <li id="item2">list2</li>
</ul>

Jquery

$("#mainlist").click(function {
   someFunction();
  });
$("#item1").click(function {
  someOtherFunction();
 });

David Thomas · Accepted Answer · 2015-03-08 17:01:59Z

4

You simply have to stop the event from propagating to its ancestors:

$("#item1").click(function (event) {
  event.stopPropagation();
  someOtherFunction();
});

Or, you could check the clicked element (the event.target) to see if it's the <ul> or the <li> by checking its id property:

$("#mainlist").click(function (event) {
    switch (event.target.id) {
        case 'mainlist':
          someFunction();
          break;
        case 'item1':
          someOtherFunction();
          break;
        default:
          break;
    }
});

References:

JavaScript:
- Event.stopPropagation().
jQuery:
- Event.stopPropagation().

answered Mar 8, 2015 at 17:01

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

2 Comments

Jotter Over a year ago

I checked the documentation and tried the return false option and this works too.

David Thomas Over a year ago

I'm glad to have helped! :)

Collectives™ on Stack Overflow

Jquery Functions in Unordered List

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related