Chase Chase - 6 months ago 28
Ajax Question

Dynamic Input Checkbox on change event

I have a table of checkboxes that are being paginated through AJAX. I am trying to create an on click event for one of these new checkboxes being clicked. When it is clicked, I am going to need to an update an array of IDs based on that standard's ID.

The problem is, I can't figure out how to get my Javascript to respond when the inputs are populated after the AJAX call. If I load up the inputs in the view, the on click event works fine, but if it comes back through AJAX, it isn't recognized.

I have looked through several similar issues including:



I could not find solutions to my problem from any of the above. I can't determine what is missing here.

HTML

<table summary="Standard Listing Table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Code</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="pl-standard-listing">
<tr>
<td>
<input checked="" name="standards[]" type="checkbox" value="8343">
</td>
<td>K.CC.A.1</td>
<td>Count to 100 by ones and by tens.</td>
</tr>
</tbody>
</table>


Jquery on click event

$('#pl-standard-listing tr td').on('click', 'input[type=checkbox]', function() {
console.log("Clicked.");
console.log(this);
});


Adding the inputs for all standards from API

// Select table and whipe current standards that are listed
var table = document.getElementById('pl-standard-listing');
$('#pl-standard-listing tr').remove();
for(var iCount = 0; iCount < currentStandards.length; iCount++) {
// Check if the standard is in the list of included standards with this grade group
if(standardIds.indexOf(currentStandards[iCount].id) === -1) {
$('#pl-standard-listing').append($('<tr><td><input name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>'));
} else {
$('#pl-standard-listing').append($('<tr><td><input checked name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>'));
}
}


The standards load properly in the view, I just can't get the event handler right for clicking the checkbox. Any and all help is greatly appreciated.

Answer

removing tr td from on click event should work.

$('#pl-standard-listing').on('click', 'input[type=checkbox]', function() {
console.log("Clicked.");
console.log(this);
});
Comments