Run javascript on btn but not container

Question

I've got this: http://jsfiddle.net/G3VjC/

which is simply:

$(document).ready(function() {

$(document).on('click','#btn',function(){
    console.log('ran btn');
});
$(document).on('click','#containerdiv',function(){
    console.log('ran div');
});

});

But when clicking the button is run the btn JS and the container JS (see console log).

How can I separate them?

thanks

score 4 · Accepted Answer · answered Sep 24 '13 at 10:17

4

use stopPropagation()

$(document).on('click','.meee',function(e){ // add event as argument
    console.log('ran btn');
    e.stopPropagation()
});

answered Sep 24 '13 at 10:17

Luca Rainone

16,138
2
38
52

score 1 · Answer 2 · answered Sep 24 '13 at 10:16

1

Try this

$(document).ready(function() {
    $(document).on('click','#containerdiv',function(){
        console.log('ran div');

    });

    $(document).on('click','.meee',function(){
        console.log('ran btn');
        return false;
    });
});

Demo

answered Sep 24 '13 at 10:16

Amit

15,217
8
46
68

returning false is not always the best option, see: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – cernunnos Sep 24 '13 at 10:19

score 0 · Answer 3 · answered Sep 24 '13 at 10:18

Or try this:

$(document).ready(function() {
    $('#containerdiv').click(function(){
        console.log('ran div');
    });

   $('.meee').click(function(e){
           e.stopPropagation();
           console.log('ran btn');
   });
});

As chumkiu already said, just use stopPropagation()

score 0 · Answer 4 · answered Sep 24 '13 at 10:23

$(document).on('click','#btn',function(e){
e.stoppropagation();
var target = $(e.target);
if(!target.attr('id') == 'btn'){
 e.preventDefault();
 $(target.find("#btn)).trigger("click")
}
//any additional logic if the target was of the intended type.
});

Run javascript on btn but not container

4 Answers4