如何避免jQuery中SmartPhoto对象被重复初始化？

这种重复初始化导致弹窗重复触发的问题在jQuery插件场景里太常见了，我给你几个靠谱的解决办法：

方法一：用自定义数据属性标记已初始化元素 #

每次初始化前，先筛选出未被标记的.js_smartphoto元素，初始化完成后给它们加上专属标记，这样分页后只会处理新加载的元素：

// 筛选出还没初始化过的元素
const $uninitializedItems = $(".js_smartphoto:not([data-smartphoto-initialized])");
if ($uninitializedItems.length > 0) {
  $uninitializedItems.SmartPhoto();
  // 标记为已完成初始化
  $uninitializedItems.attr("data-smartphoto-initialized", "true");
}

这个方法逻辑简单直观，通过自定义属性区分新旧元素，避免重复绑定事件。

方法二：直接检查插件实例是否存在 #

很多jQuery插件会把自身的实例对象存储在元素的data属性里，SmartPhoto也不例外——它会把实例存在smartPhoto这个key下。我们可以直接检查这个实例是否存在：

$(".js_smartphoto").each(function() {
  // 检查当前元素是否已有SmartPhoto实例
  if (!$.data(this, "smartPhoto")) {
    $(this).SmartPhoto();
  }
});

这种方法更精准，因为是直接检测插件本身留下的初始化痕迹，不需要额外添加自定义标记。

额外优化建议：只初始化新加载的元素 #

如果你的分页是通过AJAX动态加载新内容，最好从根源上避免重复处理——只针对新插入的DOM元素执行初始化，而不是遍历所有旧元素：

// 假设你通过AJAX获取到分页的新HTML内容后
const $newItems = $(responseHtml).find(".js_smartphoto");
// 只对新元素初始化
$newItems.SmartPhoto();

这种方式不仅能彻底解决重复初始化问题，还能提升代码执行效率。

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