CODEWITHSUNDEEP
jqueryclickhtml-lists
Jotter
Jotter

Reputation: 91

Jquery Functions in Unordered List

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();
 });

Upvotes: 0

Views: 298

Answers (1)

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 4

Related Questions