Parent & child .click() method

Question

I have below HTML code.

<li class="list-group-item font-weight-bold">
    Mouse
    <img src="images/delete.png" class="delete"/>
</li>

I have 2 different jQuery .click() method. One for the <li></li> and another for <img/>.

Now when I click on <img/> , then <li></li> .click() method also running.

Here is the jQuery code.

$('.list-group li').click(function () {
    //some code here    
});

 $('.delete').click(function () {
    //some code here 
});

How can I keep them separate, so that each .click() method run individually ?

You can refer https://stackoverflow.com/questions/13966734/child-element-click-event-trigger-the-parent-click-event — sonal.paghdal, Nov 19 '18 at 05:53

score 2 · Accepted Answer · answered Nov 19 '18 at 05:50

You can try to use this way:

var li_onclick = function (li) {
  console.log(li);
};

var img_onclick = function (img) {
  console.log(img);
};

$(document).on('click', function (e) {
  if (e.target.tagName === 'LI') {
    li_onclick(e.target);  
  } else {
    img_onclick(e.target);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="list-group-item font-weight-bold">
    Mouse
    <img src="images/delete.png" class="delete"/>
</li>

Using e.target to check which the element was clicked. Then, checking tagName to classify li tag and img tag.

score 1 · Answer 2 · answered Nov 19 '18 at 06:09

Use event.stopPropagation() method.

This method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. jQuery API Documentation

$('li.list-group-item').on('click',function(){
  console.log('LI Clicked')
})

$('img.delete').on('click',function(event){
  event.stopPropagation()
  console.log('IMG Clicked')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="list-group-item font-weight-bold">
    Mouse
    <img src="images/delete.png" class="delete"/>
</li>

score 0 · Answer 3 · answered Nov 19 '18 at 05:50

Suppose you have different id attribute on both and same class .click

<li class="list-group-item font-weight-bold click" id="this_is_li">
    Mouse
    <img src="images/delete.png" class="delete click" id="this_is_img"/>
</li>

When you click on element below script will let you know about that element id so you can use it.

$('.click').on('click', function(){
       var ID = $(this).attr('id'); 
       if(ID === 'this_is_li'){
           alert('you clicked on li #' +ID);
       }
       if(ID === 'this_is_img'){
           alert('you clicked on img #' +ID);
       }
});

Parent & child .click() method

3 Answers3