CODEWITHSUNDEEP
javascriptjquerystoppropagation
user4199417
user4199417

Reputation:

Need help how to use with event.stopPropagation() in jQuery

Since I am new to jQuery, I want to use event.stopPropagation() in my script.

I have used it in following manner:

this.$el.find(".activity_row").on("click", this.on_row_click, function (event){
                event.stopPropagation()
            });

I have another on click events under "activity_row". for that i want to aply event.stopPropagation(), But it's not working!

Please guide me how to use this.

Thanks in advance

Upvotes: 2

Views: 77

Answers (2)

Abruzzi
Abruzzi

Reputation: 495

I wrote a demo JsFiddel for your question here 

$('.btn1').click(function(event){
    event.stopPropagation();
    alert('It is first btn');
});
$('.btn1').click(function(){
    alert('It is first btn');
});

$('.btn2').click(function(){
    alert('It is second btn');
});

$('.btn-container').click(function(){
    alert('It is btn container');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-container">
    <button class="btn1">Button</button>
    <button class="btn2">Button</button>
</div>

In codes above, you can find that the function event.stopPropagation() just prevent the event spread to outer DOM, so when you click the btn1, the event in .btn-container won't be triggered.

But for the .btn1, if you rigister two event handlers like my code above, when you click the .btn1, all of event handlers in it will be triggered.

Upvotes: 1

Brian Mains
Brian Mains

Reputation: 50728

Try:

this.$el.find(".activity_row").on("click", this.on_row_click, function (event){
               if (event.preventDefault)
                  event.preventDefault();
               if (event.stopPropagation)
                  event.stopPropagation();


            });

Upvotes: 1

Related Questions