如何在jQuery中无需事件即可选中通过load()加载的新元素？

嘿，我完全懂你的困扰——你有一段必须自动执行的代码，能正常作用于页面一开始就加载的.pe元素，但用load()方法新加载的同类元素却完全不吃这套，而且这段代码还没法绑定到点击这类事件上去触发，对吧？

别担心，这里有几个靠谱的解决方案，你可以根据自己的项目情况选：

方案1：封装初始化函数，在load()回调中调用（最推荐） #

这是最直接也最稳妥的方式，把你的初始化逻辑抽成一个独立函数，然后在两个时机执行它：页面首次加载完成时，以及每次load()动态加载内容完成后。

示例代码： #

// 把你的初始化逻辑封装成函数
function initPElements() {
  // 这里放你原本要执行的代码，比如修改样式、初始化插件等等
  $('.pe:not(.initialized)').each(function() {
    // 举个例子：给元素添加自定义样式
    $(this).css('border', '1px solid #2c3e50');
    // 标记为已初始化，避免重复执行
    $(this).addClass('initialized');
  });
}

// 页面首次加载完成后，初始化预加载的.pe元素
$(document).ready(function() {
  initPElements();
});

// 当你调用load()加载内容时，在回调里再次执行初始化
$('#target-container').load('your-content-path.html', function() {
  // 加载完成后，处理新添加的.pe元素
  initPElements();
});

为什么加.not(.initialized)？因为如果你的初始化代码是修改元素状态（比如绑定数据、添加样式），重复执行可能会导致问题，给已处理的元素加个标记，就能只处理新元素啦。

方案2：用MutationObserver监听DOM变化（适合多场景动态加载） #

如果你的项目里load()调用的地方很多，不想每次都手动写回调，那可以用MutationObserver——这是现代浏览器支持的API，能高效监听DOM的变化，当有新的.pe元素被添加到页面时，自动执行初始化代码。

示例代码： #

$(document).ready(function() {
  // 先初始化页面上已有的.pe元素
  initSinglePElement($('.pe:not(.initialized)'));

  // 创建MutationObserver实例，监听DOM新增节点
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // 检查新增的节点里有没有未初始化的.pe元素
      const newPElements = $(mutation.addedNodes)
        .find('.pe:not(.initialized)')
        .addBack('.pe:not(.initialized)');
      
      if (newPElements.length > 0) {
        initSinglePElement(newPElements);
      }
    });
  });

  // 配置观察选项：监听整个文档的子节点添加
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // 单个/批量元素的初始化函数
  function initSinglePElement($elements) {
    $elements.each(function() {
      // 这里放你的初始化逻辑
      $(this).css('border', '1px solid #2c3e50');
      $(this).addClass('initialized');
    });
  }
});

这个方法的好处是一劳永逸，不管你通过load()还是其他方式动态添加.pe元素，都会自动被处理。不过要注意，MutationObserver需要浏览器支持（现代浏览器都没问题，IE11及以上也支持）。

为什么之前的代码对新元素无效？ #

简单说，页面首次加载时，你的代码只会查找当时存在的.pe元素并处理；而load()新加载的元素是之后才出现在DOM里的，所以不会被之前的代码覆盖到。上面的两种方法，要么在新元素加载后重新执行代码，要么监听DOM变化自动处理，完美解决这个问题~

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