CODEWITHSUNDEEP
javascriptjqueryevents
goofansu
goofansu

Reputation: 2277

div's event always called when click checkbox in Chrome

I'm binding two events on elements like following:

<div class="view">
    <input type="checkbox" class="edit">
</div>

$(function(){
    $(".view").bind('dblclick', show1);
    $(".edit").bind('click',show2);
});

function show1(){
    console.info('here');
}

function show2(){
    console.info('hi');
}

It is normal in Firefox, but in Chrome, div's event always called when click checkbox.

FYI: http://jsfiddle.net/dMcnJ/1/

Upvotes: 0

Views: 87

Answers (2)

Artem Koshelev
Artem Koshelev

Reputation: 10606

$(function(){
    $(".view").bind('dblclick', show1);
    $(".edit").bind('click',show2);
    // Disable event bubbling on dblclick
    $(".edit").bind('dblclick',function(e) { e.stopPropagation();});
});

function show1(){
    console.info('here');
}

function show2(event){  
    event.stopPropagation();
    console.info('hi');
}

http://jsfiddle.net/dMcnJ/9/

Upvotes: 4

Sang Suantak
Sang Suantak

Reputation: 5265

It's called event bubbling. Do the following:

function show2(e){
    e.stopPropagation();
    console.info('hi');
}

Upvotes: 1

Related Questions