Ajax调用后重新初始化jQuery FaceMocion插件重复问题求助

以下是几个可行的解决思路：

• 只初始化Ajax新增的元素
  不要每次都选择所有.facemocion元素，而是定位到Ajax加载后新增内容的容器，只对里面的.facemocion初始化。比如假设Ajax返回的内容插入到#new-content容器里，代码可以写成：

  // 假设ajax请求完成后，新内容已插入#new-content
  $('#new-content .facemocion').faceMocion({ /* 你的配置参数 */ });
  

  这样就不会触碰已经初始化过的旧元素，从根源避免重复初始化。

• 用标记过滤已初始化的元素
  可以自己给已初始化的元素加个专属类，或者检查插件是否在元素上留下了数据标记：

  1. 手动加类标记：

     $('.facemocion:not(.fm-initialized)')
       .addClass('fm-initialized')
       .faceMocion({ /* 你的配置参数 */ });
     

  2. 检查插件自带的数据标记：
     很多jQuery插件初始化后会在元素的data属性中存入实例，比如faceMocion，可以通过这个判断是否已初始化：

     $('.facemocion').each(function() {
       if (!$(this).data('faceMocion')) {
         $(this).faceMocion({ /* 你的配置参数 */ });
       }
     });
     

• 正确销毁已初始化的插件实例（如果支持）
  如果插件提供了销毁方法，先销毁旧实例再重新初始化是最稳妥的。比如有些插件支持destroy命令：

  $('.facemocion').faceMocion('destroy');
  // 销毁后再重新初始化
  $('.facemocion').faceMocion({ /* 你的配置参数 */ });
  

  如果插件没有官方销毁方法，你可以手动清理它生成的DOM元素（比如表情节点），再解绑事件、清除数据：

  $('.facemocion').each(function() {
    // 假设插件生成的表情元素有特定类，比如.facemocion-item，先移除
    $(this).find('.facemocion-item').remove();
    // 清理事件和插件数据
    $(this).unbind().removeData('faceMocion');
  });
  // 重新初始化
  $('.facemocion').faceMocion({ /* 你的配置参数 */ });
  

内容的提问来源于stack exchange，提问作者Roddy P. Carbonell