Clever Geek Handbook

JQuery.click event

I am trying to do this, when they click on <tr>

it will bring up a dialog box which works great. However, within that <tr>

I have an input checkbox that I have to allow them to click without opening 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>
+3


source to share


4 answers


Stop click propagation:



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


source


You can add this code:

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


This will stop clicking on the checkbox from propagate to tr.

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

+1


source


Edit: Changed from .is(':checkbox')

to checke.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');
});
0


source


check it

Add checkbox event.stopPropagation () in checkbox. This will stop the bubble event.

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

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

})

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

0


source






More articles:


All Articles