Albert Albert - 2 months ago 7
jQuery Question

JQuery.on() click listener not working as expected

I have the following HTML structure:

<table class="table table-hover js-integrations js-radio-rows">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Owner</th>
<th>Modified Date</th>
</tr>
</thead>
<tbody>
<!-- Start load by ajax -->
<tr class="clickable">
<td class="js-integration-option">
<input type="radio" value="20" name="integration_id" class="pseudo-radio sr-only">
<label class="icon-lg" for="http-radio"></label>
</td>
<td>
<img align="absmiddle" src="imglocation" />
Some Title
<span class="file-size">
(50kb)
</span>
</td>
<td>
Owner Le Own
</td>
<td>
Date
</td>
</tr>
<!-- End load by ajax -->
</tbody>
</table>


And I have this piece of jQuery.

jQuery(document).ready(function(){
console.log('here1');
jQuery('.js-radio-rows').on('click', 'tr', function() {
console.log('here2');
});
});


When I click on the clickable row,
console.log('here2')
does not fire. Any ideas what I'm doing wrong? Could it be because the rows are loaded by ajax? This happens long after document ready is called, since it depends on something else that is clicked.

Answer

If .js-radio-rows table is not available on document.ready event, this will not work. Try setting document as delegate for the event:

jQuery(document).on('click', '.js-radio-rows tr', function() {
    console.log('here2');
});
Comments