从加载的内容触发 on('click')

triggering an on('click') from loaded content

我有两个页面:edit.phplist-questions.php。我想从 list-questions 加载内容到 edit,这有效。

我还希望能够在 edit.

内从 list-questions 触发 on('click')

Edit.php 我有:

<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>

list-questions.php 之内我有:

<?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
};

当找到问题时,它会输出类似于(简化)的内容:

<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>

我将如何在 edit.php 中监听来自 .trg-delete 的点击?

在文档上绑定事件,过滤到.trg-delete.

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