CODEWITHSUNDEEP
jquery
Swapy
Swapy

Reputation: 83

Jquery event overriding

I want to over ride an event through delegate I am adding a delegate on table row. I also have a button in one of the cell of the row. Now when I click on button the button click event fires, but the row click event also fires I don't want row click to fire when button is clicked. [Link for my query][1]

$(function(){
    $("body").delegate("table tr","click",function(evt){
        alert("row clicked");
    });

    $("body").delegate("table tr input[type=button]","click",function(evt){
        alert("button clicked");
    });
});

http://jsfiddle.net/jjMVU/

Upvotes: 0

Views: 43

Answers (2)

wizzardz
wizzardz

Reputation: 5874

This is happening because of event bubbling. in order to prevent this from happening you have to use evt.stopPropagation() in your button click.

So your second event handler should look like this

$("body").delegate("table tr input[type=button]","click",function(evt){
    evt.stopPropagation();
   alert("button clicked");
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, delegate has be deprecated in favour of on. Secondly, you need to stop propagation of the event. Try this:

$("body").on('click', "table tr input[type=button]", function(evt){ 
    evt.stopPropagation();
    alert("button clicked");
});

Updated fiddle

Upvotes: 2

Related Questions