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

Posted 2023-05-09

【中文标题】数据表 - Jquery 在分页中的数据表中不起作用

【英文标题】：Datatables - Jquery is not working in datatables in pagination

【发布时间】：2018-06-15 13:10:12

【问题描述】：

我试图在点击创建测验时提醒一些数据，它在第一页上工作，但在其他页面上，提醒不起作用。我已经附上了桌子的图片

我试图在谷歌上找到，但在数据表中没有任何可用的信息。

html 代码：

<table id="post-table" class="table display-table table-striped table-
bordered"  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");
);

【问题讨论】：

你的代码在哪里？您的代码在哪里？ W H E R E I S T H E C O D E ?

代码太多，我把相关代码加进去。我希望这会有所帮助

顺便说一句，如果你正在做类似$(".button").click( 的事情，它不适用于动态添加的按钮。尝试改用$('body').on('click', '.button')

DataTable 动态创建元素...尝试使用委托... Like：$(document).on([event],[selector],function()...).

@LouysPatriceBessette, $("#post-table").on("click",".create-quiz",function()...);这行得通。谢谢你。所以这意味着当事情是动态的时，我应该添加到父级

【参考方案1】：

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

最简单的解决方案是在容器元素甚至文档上监听事件。比如：

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

应该工作

【讨论】：

最接近的静态元素优于document...对于OP，即#post-table。 ;)