Question

I have a table row, which triggers an event when clicked. There are (not displayed) checkbox + its styled label inside the row.

What i want is to prevent (i guess with :not or .not() but cant figure it out) the execution if checkbox/label is clicked.

HTML:

<center>
<table>
    <tr class='pend'>
        <td><input type="checkbox" id="bb"/> <label for="bb">X</label></td>
        <td>&nbsp;</td>
        <td>some text</td>
    </tr>
</table>
</center>

CSS:

center {
margin-top:20px;
}

input[type=checkbox] + label {
    width:10px;
    height:10px;
    background-color:red;
}

input[type=checkbox] {
    display:none;
}

table tr {
height:40px;
    background-color:gray;
}

table td {
padding:5px;
}

JS:

$('.pend').on('click',function(){
    $(this).append('text');
    return false;
})

JSFIDDLE: http://jsfiddle.net/ySuGB/2/

Answer 1

You need to prevent event bubbling on click of checkbox/label.

See below,

//                     V-- Is the TD containing the checkbox and the label.
$('.pend :checkbox').parent().on('click', function(event) {
    event.stopPropagation()
});

DEMO: http://jsfiddle.net/ySuGB/12/