jquery calling an event inside another binded event

Question

I have an html as below :

<div class="parent"> 
  <a href="#">parent</a>
  <div class="child">child</div>
</div>

Here is my Jquery binding an click event :

$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
    });

    $('.child').on('click', function(){
        alert('child div');
    });
});

I want, if I click on ".child" div, then event bound on "div.parent" should not be called. Again if I click on ".parent" div and its bound event should be executed.

I have tried with following -

 $('.child').on('click', function(){
        alert('child div');
        $(this).parents('.parent').off('click');
        return false;
    });

But above code has unbound the "click" event on parent div permanently, and again its click event does not trigger.

please see https://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event/2364639 It has already been answered. — Dhiraj, Aug 28 '17 at 18:25

score 3 · Accepted Answer · answered Aug 28 '17 at 18:23

why don't you stop propagating to prevent bubbling up the event from child to achieve this

$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
    });

    $('.child').on('click', function(ev){
        ev.stopPropagation();
        alert('child div');
    });
});

score 1 · Answer 2 · answered Aug 28 '17 at 18:31

Once you click on the child div, the event bubbles up through the DOM tree, which causes the parent div to be triggered, now to prevent this you need to stop propagation using event.stopPropagation() read more on it here

 $('.child').on('click', function(event){
    event.stopPropagation();
    alert('child div');
    return false;
});

score 1 · Answer 3 · answered Aug 28 '17 at 19:23

Gautam,

Interesting problem. I was thinking subclasses. But since you have the div elements wrapped in each other, this is not feasible. Therefore, I recommend the following functions that will toggle the response until the next time it is clicked.

makeParentReady = function() {
    $('.parent').on('click', function(){
    myClass=this.className;
    alert('parent div');

    });

}

$(document).ready(function(){
        makeParentReady();

        $('.child').on('click', function(){
            myClass=this.className;
            alert('child div');
            $(this).parents('.parent').off('click');
            makeParentReady();
            return false;
            });
        });

score 0 · Answer 4 · answered Aug 28 '17 at 18:29

Yes. Dhiraj is right. use topPropagation() function

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
        $('.child').click();
    });

    $('.child').on('click', function(e){
        e.stopPropagation()
        alert('child div');
    });
});

</script>

</head>
<body>

<div class="parent"> 
  <a href="#">parent</a>
  <div class="child">child</div>
</div>

</body>
</html>

jquery calling an event inside another binded event

4 Answers4