CODEWITHSUNDEEP
jquery
Sean Kimball
Sean Kimball

Reputation: 4494

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

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?

Upvotes: 0

Views: 602

Answers (1)

Tasos Fel
Tasos Fel

Reputation: 331

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>

Upvotes: 1

Related Questions