解决WordPress插件Ajax加载内容中jQuery代码失效问题

问题核心原因：你的jQuery代码是在页面初始DOM加载完成后绑定的，而通过Ajax动态加载的新内容是后续才插入到DOM中的，初始的事件绑定不会自动作用在这些新元素上。下面提供两种可行解决方案：

方案一：使用jQuery事件委托（推荐） #

把事件绑定到始终存在于DOM中的父元素（比如document，或更接近目标元素的静态容器），通过事件冒泡机制处理动态元素的事件。示例如下：

如果你的原代码是：

$('.your-target-element').click(function() {
  // 自定义逻辑代码
});

改成事件委托形式：

$(document).on('click', '.your-target-element', function() {
  // 自定义逻辑代码
});

无论元素是初始加载还是Ajax动态添加，只要匹配.your-target-element选择器，对应的事件就会触发。

方案二：在Ajax加载完成后重新初始化代码 #

插件的load方法自带回调函数，会在新内容加载完成后执行，可利用这个时机重新运行你的jQuery初始化逻辑。

方法1：封装初始化函数并在回调中调用 #

先把自定义jQuery逻辑封装成独立函数：

function initMyCustomScripts() {
  // 所有自定义jQuery逻辑
  $('.your-target-element').click(function() {
    // ...
  });
  // 其他需要初始化的代码
}

// 页面初始加载时执行
jQuery(document).ready(function($) {
  initMyCustomScripts();
});

然后在插件的load-more.js文件的load回调末尾添加调用（注意：直接修改插件文件会在插件更新后丢失，建议通过子主题或自定义插件实现，避免覆盖）：

$('.wp-load-more-posts-page-'+ pageNum).load(nextLink + ' ' + postClassSelector,
  function() {
    // 原插件的其他代码...
    
    // 添加这一行，重新初始化自定义代码
    initMyCustomScripts();
  }
);

方法2：监听全局Ajax完成事件 #

若不想修改插件代码，可通过jQuery的ajaxComplete事件监听所有Ajax请求完成的时机，再执行初始化函数：

jQuery(document).ajaxComplete(function() {
  initMyCustomScripts();
});

注：这种方式会在所有Ajax请求完成后执行，若页面有其他Ajax操作，可能造成不必要的重复执行，需根据实际场景判断。

内容的提问来源于stack exchange，提问作者alexander