CODEWITHSUNDEEP
jquery
James Wilson
James Wilson

Reputation: 5150

Jquery .click event

I am trying to make it so when they click on a <tr> it will open up a dialog which works just fine. However within this <tr> I have an input check box that I need to allow them to click on without opening up the dialog. How is this possible?

$('#messageContainer tr').click(function () {
    var masterMessageID = $(this).attr('messageID');
    var replyToID = $(this).attr('replyToID');

    buildDialog(this.id, masterMessageID, replyToID);
    $(this).removeClass('messageNew');
});

HTML:

<tr replytoid="3" messageid="7078" id="16">
    <td>&nbsp;&nbsp;<input type="checkbox" name="checkAll"></td>
    <td>John Doe</td>
    <td>sdfsdf</td>
    <td>3/14/2012 1:29:47 PM</td>
</tr>

Upvotes: 3

Views: 465

Answers (4)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Edit: Changed from .is(':checkbox') to check for e.target.type

DEMO

$('#messageContainer tr').click(function (e) {
    if (e.target.type && e.target.type == 'checkbox') {
       e.stopPropagation(); //stop bubbling
       return;
    }

    var masterMessageID = $(this).attr('messageID');
    var replyToID = $(this).attr('replyToID');

    buildDialog(this.id, masterMessageID, replyToID);
    $(this).removeClass('messageNew');
});

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

You can add this code:

$('#messageContainer tr input:checkbox').click(function (e) {
    e.stopPropagation();
});

This will stop the click on the checkbox from propagating up to the tr.

Example - http://jsfiddle.net/U5LBR/1/

Upvotes: 1

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

Check this

Add event.stopPropagation() in checkbox. It will stop the event bubbling.

$('#messageContainer tr').click(function () {
$('#popup').toggle();
});

$('#messageContainer input[type="checkbox"]').click(function(e){
alert('Checked');
 e.stopPropagation();

})

​

http://jsfiddle.net/JLDzq/1/

Upvotes: 0

Guffa
Guffa

Reputation: 700342

Stop the propagation of the click:

$('#messageContainer tr :checkbox').click(function(e){
  e.stopPropagation();
});

Upvotes: 6

Related Questions