如何确保自定义脚本在分页后保持加载状态？答案

【问题标题】：How to make sure custom script stays loaded after pagination?如何确保自定义脚本在分页后保持加载状态？
【发布时间】：2022-12-04 08:15:33
【问题描述】：

我有一些在分页后消失的自定义 jQuery。我无法弄清楚如何保持它加载，所以我想我会尝试在单击后重新加载它，但那也不起作用。

这是我试图让它运行的东西：

$(document).ready(function() {
$('.pagination>li>a').live("click", function(){

任何想法如何使这项工作？

【问题讨论】：

标签： jquery pagination

【解决方案1】：

看起来您正在尝试在 jQuery 代码中使用 live 方法，该方法在 jQuery 1.7 中已弃用并在 jQuery 1.9 中删除。您可以使用 on 方法将事件处理程序附加到 .pagination>li 元素中的 a 元素，而不是使用 live 方法。

下面是一个示例，说明如何使用 on 方法将点击事件处理程序附加到分页链接：

$(document).ready(function() {
  $(document).on("click", ".pagination>li>a", function() {
    // Your code here
  });
});

on 方法采用三个参数：事件类型（例如，“单击”）、与要将事件处理程序附加到的元素相匹配的选择器以及事件处理程序函数。在此示例中，事件类型为“click”，选择器为“.pagination>li>a”，这将匹配作为 li 元素后代的所有 a 元素，这些元素是具有分页类的元素的后代。当这些元素之一发生单击事件时，将调用事件处理函数。

请注意，当附加事件处理程序时，应该在页面上存在的父元素上调用 on 方法。在本例中，我调用了文档元素的 on 方法，该元素将始终存在于页面上。这一点很重要，因为分页链接可能会在初始页面加载后动态添加到页面，并且 on 方法将无法将事件处理程序附加到这些元素，除非在页面上存在的父元素上调用它。

【讨论】：

【解决方案2】：

听起来您正在尝试向具有类 pagination 和后代 li 和 a 元素的元素添加点击事件侦听器。较新版本的 jQuery 不再支持 .live() 方法，因此您需要使用不同的方法来附加事件侦听器。

一种选择是使用 .on() 方法，它允许您将事件侦听器附加到将来将动态添加到页面的元素。此方法的工作原理是将事件侦听器附加到添加侦听器时页面上存在的父元素，然后侦听从动态添加的元素冒泡到该父元素的事件。以下是您可以如何修改代码以使用 .on() 方法：

$(document).ready(function() {
  // Attach the event listener to the document, since it exists when the listener is added
  $(document).on("click", '.pagination>li>a', function() {
    // Your code here
  });
});

或者，您可以使用 .delegate() 方法，它的工作方式与 .on() 类似，但允许您指定事件侦听器应附加到的父元素。以下是您可以如何修改代码以使用 .delegate()：

$(document).ready(function() {
  // Attach the event listener to the .pagination element, since it exists when the listener is added
  $('.pagination').delegate("li a", "click", function() {
    // Your code here
  });
});

【讨论】：