数据表 link 在第一页后停止工作

Question

我有一个数据表，里面有一个 data-href，可以创建一个 link 到论坛页面，我的问题在于我的数据表 link 在第一页上工作得很好，但是当我转到第二页我无法再关注 link，但是当我检查元素时它仍然具有 link 的所有数据。我的 JS 和数据表

中的 link 的样式

<style>
        tr.clickable-row { cursor: pointer; }
        tr.clickable-row:hover { background-color:#F0F8FF;}
        </style>
        <script>
        jQuery(document).ready(function($) {
    $(".clickable-row").on('click',$('.clickable-row'),function() {
        window.document.location = $(this).data("href");
    });
});
</script>

MySQL 表调用所有行来填充数据并正确提取。

echo "<tr class='clickable-row' data-href='viewPage.php?id=".inv_forum_page()."&forum=".$forum['id']."'>
    <td>".$authorname."</td><td>".$posttype."".$forum['subject']."</td><td>".$forum['replies']."</td><td>".$forum['views']."</td>
    </tr>";

我不想发布整个函数，因为它有很多代码，但我不认为这是问题所在，因为它在第一页上有效，我相信它与我的 Jquery 有关，但如果您想查看函数本身，它位于 github 下 https://github.com/Doxramos/Invontrol/blob/master/plugins/inv_forum/functions.php 第 75-123 行我阅读了委托事件，我相信它的脚本编写正确，我不确定此时的问题是什么。

Answer 1

您已将 class 'clickable-row' 交给 tr。而不是 tr class 名称，尝试 jQuery 'on' 方法 table class 名称。例如将class'clickable-tbl'赋值给table标签，修改jQuery代码如下：

$(".clickable-tbl").on('click',$('.clickable-row'),function() {
        window.document.location = $(this).data("href");
    });

Answer 2

使用下面的代码

你的问题叫做Event Delegation。

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

<script>
    jQuery(document).ready(function($) {
       $(document).on('click','.clickable-row',function() {
          window.document.location = $(this).data("href");
       });
    });
</script>

如果每次调用新页面时都调用点击事件，请使用以下代码。

<script>
    jQuery(document).ready(function($) {
       $(document).off('click').on('click','.clickable-row',function() {
          window.document.location = $(this).data("href");
       });
    });
</script>

数据表 link 在第一页后停止工作

Datatable link stops working after page one

javascript

php

mysql

datatable

jquery