Jquery .click event

Question

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>

Guffa · Accepted Answer · 2012-03-15 16:00:07Z

6

Stop the propagation of the click:

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

answered Mar 15, 2012 at 16:00

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Selvakumar Arumugam Over a year ago

Will it work for bubbling down events? Wouldn't the tr click be called first if the events bubble down?

Richard Dalton Over a year ago

@SKS Events bubble up, not down.

Selvakumar Arumugam Over a year ago

@RichardD I think you should check quirksmode.org/js/events_order.html

Richard Dalton · Accepted Answer · 2012-03-15 16:08:42Z

1

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/

edited Mar 15, 2012 at 16:08

answered Mar 15, 2012 at 16:00

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Comments

Praveen Vijayan · Accepted Answer · 2012-03-15 16:05:41Z

0

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/

answered Mar 15, 2012 at 16:05

Praveen Vijayan

6,7612 gold badges32 silver badges28 bronze badges

2 Comments

James Wilson Over a year ago

I am not too familiar with bubbling. Would the first answer the one that just adds 'e.stopPropagation();' be good or bad?

Praveen Vijayan Over a year ago

First answer is doing the same.

Selvakumar Arumugam · Accepted Answer · 2012-03-15 16:10:44Z

0

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');
});

edited Mar 15, 2012 at 16:10

answered Mar 15, 2012 at 15:57

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

4 Comments

James Wilson Over a year ago

@Alnitak I tried .not() but could not get it to work correctly.

Selvakumar Arumugam Over a year ago

@JamesWilson I think Guffa has a better solution. In case if you don't want an additional handler, then see my edits above.

James Wilson Over a year ago

@SKS Alright, I tried Guffa's and it seems to work. I haven't tested it in any old old browser. But it seems to do the trick for me in current versions of FF and IE.

Alnitak Over a year ago

@JamesWilson the propagation was the real fault, I was just proposing .not() instead of !(...).is()

Collectives™ on Stack Overflow

Jquery .click event

4 Answers 4

3 Comments

Comments

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

4 Comments

Related