triggering an on('click') from loaded content

Question

I have two pages: edit.php and list-questions.php. I am wanting to load content from list-questions to edit, this works.

I also want to be able to trigger on('click') from list-questions within edit.

Within Edit.php I have:

<script>
$(document).ready(function() {
    var questions = $('div.questions');
    $('div.questions').load('list-questions.php?id=<?php echo $catID; ?>');

    setInterval(function() {
        $('div.questions').load('list-questions.php?id=<?php echo $catID; ?>');
    }, 5000);


    $('.trg-delete').on('click', function() {
        console.log(true);
    });
});
</script>
<div class="questions">
</div>

And within list-questions.php I have:

<?php
$catID = $_GET['id'];

$getItems = $con->prepare("SELECT itemID,itemName,itemType FROM items WHERE catID=?");
$getItems->bind_param("i", $catID);
$getItems->execute();
$getItems->store_result();
if($getItems->num_rows > 0) {
?>
<table class="full outline">
  <tr class="head">
    <td colspan="2"><p>Questions</p></td>
  </tr>
<?php
  $getItems->bind_result($itemID,$itemName,$itemType);
  while($getItems->fetch()) {
?>
  <tr>
    <td><p><?php echo $itemName; ?></p></td>
    <td class="fixed-100 options">
      <a class="trg-delete confirm" data-id="<?php echo $itemID; ?>"><i class="fa fa-fw fa-close"></i></a>
    </td>
  </tr>
<?php }; ?>
</table>
<?php } else { ?>
<table class="full outline">
  <tr class="head">
    <td colspan="2"><p>Questions</p></td>
  </tr>
  <tr>
    <td colspan="2"><p class="alert">No Questions Found</p></td>
  </tr>
</table>
<?php
};

When questions are found it outputs something similar to (simplified):

<div class="questions">
    <table>
        <tr>
            <td><p>Questions</p></td>
        </tr>
        <tr>
            <td><p>Question?</p></td>
            <td>
                <a class="trg-delete" data-id="1"><i></i></a>
            </td>
        </tr>
    </table>
</div>

How would I go about listening for a click from .trg-delete in edit.php ?

Answer 1

Bind the event on the document, and filter it to .trg-delete.

$(function){
    $(document).on('click', '.trg-delete', function() {
        ...
    });
});