CODEWITHSUNDEEP
jquery
user1564979
user1564979

Reputation: 1

event on <tr> tag except paticular <td>

I have problem about event handling.

Here is example:

<table>
    <tr>
        <td><input type='checkbox' id='xxx'/><td>
        <td>a1</td>
        <td>b1</td>
    </tr>
    <tr>
        <td><input type='checkbox' id='xxx'/><td>
        <td>a2</td>
        <td>b2</td>
    </tr>
    <tr>
        <td><input type='checkbox' id='xxx'/><td>
        <td>a3</td>
        <td>b3</td>
    </tr>
    ....
</table>

I bind click event on tr tag and then even when checkbox was checked, it called click event.

How do I except this?

It is not good to bind event on tag. because, the number of td tag is not limited.

Thanks for your help.

Upvotes: 0

Views: 86

Answers (3)

makmonty
makmonty

Reputation: 465

What I usually do, after fixing the messed up tags, is:

$("tr").click(function(e) {
    if(!$(e.target).is("input[type='checkbox']")) {
        alert("No checkbox");
    }
});

Upvotes: 1

andrew
andrew

Reputation: 9583

add a class to your checkbox

<td><input type='checkbox' class="cb" id='xxx'/></td>

and use e.target to determine if the checkbox was clicked

$('tr').on('click',function(e){
var target=$(e.target);
if (target.hasClass('cb')){
     return false;
   }
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

Try

$('table').on('click', 'tr', function(){
    //your code
})

$('table').on('click', 'input:checkbox', function(e){
    e.stopPropagation();
})

Demo: Fiddle

Upvotes: 1

Related Questions