Unable to click checkbox in table row when jQuery is used to detect clicks on the row

Question

Bit of an odd thing happening here, I have a table of data with rows that can be selected by clicking on any cell in the row, the last cell has some other functions attached to it, so it can select the row (check the checkbox) but not unselect it:

Here is the markup:

<tr class="82510246 inventory-row">

<td>
     <input type="checkbox" value="82510246" name="tags[]" id="tag82510246" class="checkbox inventory-checkbox">
</td>

<td>40003</td>
... a whole bunch of cells ...
<td>430</td>

<td class="inventory-price">
     <a class="tag-price">0.7289</a>
</td>

</tr>

AND THE JQUERY:

$('.inventory-row').on('click', 'td', function(event) {
    var css = $(this).attr('class');
    var box = $(this).closest('tr').find(':checkbox').is(':checked');
    if(css !== 'inventory-price'){
        $(this).closest('tr').find(':checkbox').trigger('click');
    }  
    if(css == 'inventory-price' && !box){
        $(this).closest('tr').find(':checkbox').trigger('click');
    }   
});

I can't click on the cell/checkbox directly - if I click on that cell, nothing happens (box does not select/deselect)
Why is that not happening?

Can you add a class to the checkbox cell so you can have a :not clause in your .on selector? — Jtbs
– Jtbs, Commented Mar 9, 2018 at 16:44

Tasos Fel · Accepted Answer · 2018-03-09 16:44:21Z

1

You try to add event click on every td so you have conflict in your code cause your checkbox is inside a td too. Add a class like "td-text" at your td that you want to be clickable, except this with checbox.

$('.inventory-row').on('click', '.td-text', function(event) {
    var css = $(this).attr('class');
    var box = $(this).closest('tr').find(':checkbox').is(':checked');
    if(css !== 'inventory-price'){
        $(this).closest('tr').find(':checkbox').trigger('click');
    }  
    if(css == 'inventory-price' && !box){
        $(this).closest('tr').find(':checkbox').trigger('click');
    }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr class="82510246 inventory-row">

<td>
     <input type="checkbox" value="82510246" name="tags[]" id="tag82510246" class="checkbox inventory-checkbox">
</td>

<td class="td-text">40003</td>
... a whole bunch of cells ...
<td class="td-text">430</td>

<td class="inventory-price">
     <a class="tag-price">0.7289</a>
</td>

</tr>
</table>

answered Mar 9, 2018 at 16:44

Tasos Fel

3312 silver badges6 bronze badges

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

2 Comments

Sean Kimball Over a year ago

thanks, but we also have to add the .inventory-price to the on(click) selectors to catch the click on the price cell.

Tasos Fel Over a year ago

Yes . I thought you didn't need the inventory-price. it's the same logic :) have fun

Collectives™ on Stack Overflow

Unable to click checkbox in table row when jQuery is used to detect clicks on the row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related