Question

Here is HTML markup of 2 rows from my huge table (which generated by PHP and applied Datatables after that)

<tr url="?page=item&id=850">

    <td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="850" class="checkbox"/>    850</td>

    <td> 9007</td>

    <td style="text-align:center">BK</td>

    <td style="text-align:center">41</td>

    <td style="text-align:center" id="qt">1</td>

    <td style="text-align:center">7</td>

    <td style="text-align:center">11</td>

    <td>09.02.2012</td>

</tr>

And here is second row

<tr url="?page=item&id=587">

   <td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="587" class="checkbox"/>    587</td>

   <td> 779-59</td>

   <td style="text-align:center">BR</td>

   <td style="text-align:center">37</td>

   <td style="text-align:center" id="qt">2</td>

   <td style="text-align:center">15</td>

   <td style="text-align:center">14</td>

   <td>08.02.2012</td>

</tr>

Function below works for 90% rows. I really have no idea why this script works for second row from examples but doesn’t do anything for first row. These 2 rows are nearly same.

$("td").not('.item_id').click(function(){
    window.open ($(this).closest("tr").attr("url"));
});

How do you think, what can cause this problem?

Answer 1

Instead use this which will attach click handler on tr and ignore if clicked on checkbox or its containing cell. Try this.

$("tr").click(function(){
    window.open($(this).attr("url"));
});

$("td.item_id").click(function(e){
    e.stopPropagation();
});

Alertnatively you can also use event.target to check if it is checkbox don’t do any this.

$("tr").click(function(e){
    if(!$(e.target).is(':checkbox') && !$(e.target).is('.item_id')){
        window.open($(this).attr("url"));
    }
});