Question

我有一个带有data-href的数据表来创建一个论坛页面的链接，我的问题在于我的数据表链接在第一页上运行良好的地方，但是当我转到第二页时我无法再关注链接，但是当我检查元素时它仍然具有链接的所有数据。我的JS和Style用于数据表中的链接

<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

使用下面的代码

您的问题称为Event Delegation。

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

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

如果每次新页面调用都使用下面的代码时调用click事件。

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

Answer 2

你已经给了课程＆＃39; clickable-row＆＃39;到tr。而不是tr类名称，尝试jQuery＆＃39; on＆＃39;表类名的方法。例如，在课程中点击“可点击的tbl”＆＃39;表标签和修改jQuery代码如下：

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

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

2 个答案: