Ajax not firing inside Modal Popup - php

Question

Currently I have a button to view cart contents as such:
SHOW CART
data-target is for my modal
data-targets is for the body of my modal after the ajax endpoint returns a response
My Ajax code is as follows:
$('a[data-async="true"]').click(function(e){
e.preventDefault();
var self = $(this),
url = self.data('endpoint'),
target = self.data('targets'),
cache = self.data('cache');
$.ajax({
url: url,
cache : cache,
success: function(data){
if (target !== 'undefined'){
$('#'+target).html( data['response'] );
}
}
});
});
(courtesy of jQuery and data-attributes to handle all ajax calls?)
Now once the modal dialog popup has appeared I have some grid items inside a table such as:
<table id="itemstable" class="table table-striped table-bordered">
<thead class="fixed-header">
<tr>
<th>QTY</th>
<th>SKU</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>' . $v->qty . '</td>
<td>' . $v->sku . '</td>
<td> X
</tr>
</tbody>
</table>
The problem I'm running into is I have another ajax endpoint call for each table line item but this time when I click it, the Ajax isn't firing at all. I looked at my browsers inspector but not even an error or attempt.
Am I missing something here because it's practically the same code I ran to get the popup and show the response in the body but now the only difference is I'm doing it inside the modal.
Your help is appreciated!

Answer 1

Change it to this and it should work.
$(document).on('click', 'a[data-async="true"]', function (e) {
e.preventDefault();
// your code here
});