javascript - 数据表 - Jquery 在分页数据表中不起作用

Question

我试图在点击创建测验时提醒一些数据，它在首页上正常工作，但在其他页面上，提醒不起作用。我已附上表格的图片

我尝试在谷歌上查找，但数据表中没有任何关于此的信息。

HTML 代码:

<table id="post-table" class="table display-table table-striped table-
bordered" width="100%" cellspacing="0">
<thead>
<tr>
  <th>Class</th>
  <th>Published</th>
  <th>Quiz</th>
  <th>Create Quiz</th>
  <th>View Quiz</th>
</tr>
</thead>
<tbody>
<?php foreach ($allposts as $allpost) { ?>
<tr>
  <td><?php echo $grades->getGradename($allpost['grade_id']); ?></td>
  <td><?php echo $others->milliToTime($allpost['created_at']); ?></td>
  <td><?php echo $quiz->quizCount($allpost['post_id']); ?></td>
  <td>
    <a href="#" data-post-id='<?php echo $allpost['post_id']; ?>' class="create-quiz"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
  </td>
  <td><a href="/admin/quiz/allquiz.php?post_id=<?php echo $allpost['post_id'] ?>"><i class="fa fa-eye" aria-hidden="true"></i></a></td>
</tr>
<?php } ?>
</tbody>
</table>

脚本

$('#post-table').DataTable({
    "bSort": false
});

$('.create-quiz').click(function(e){
    e.preventDefault();
    alert("ss");
});

Answer 1

您的问题是，在页面上加载浏览器执行您的 JavaScript 并将您的代码关联到第一页中存在的按钮。但是当您更改页面时，您看到的这些元素是新元素，没有附加任何事件监听器。

最简单的解决方案是监听容器元素甚至文档上的事件。像这样的东西:

$(document).on('click', '.create-quiz', function(){ console.log('here i am'); }

应该可以工作