如何在SweetAlert中添加带ID元素并执行jQuery社交分享代码

你碰到的核心问题很典型：在SweetAlert弹窗还没把目标元素插入DOM树的时候，就尝试调用jsSocials初始化，这时候jQuery根本找不到#share元素，自然不会有任何效果。

正确的实现思路 #

我们需要利用SweetAlert提供的弹窗打开回调函数，等弹窗完全渲染、#share元素已经被插入页面后，再去初始化jsSocials。不同版本的SweetAlert回调名称略有区别，下面分别给出常用版本的代码：

方案1：旧版SweetAlert（v1.x）

var share_friends = function(e){ 
  swal({ 
    title: "<i>Title</i>", 
    content: share_social, 
    button: "V <u>redu</u>",
    // 弹窗打开后触发的回调
    open: function() {
      // 此时#share已存在于DOM中
      $("#share").jsSocials({ 
        shares: ["facebook", "twitter", "email"] // 替换为你需要的分享渠道
      });
    }
  }); 
}

var share_social = document.createElement("div"); 
share_social.id = 'share';

方案2：新版SweetAlert2（v2.x+，推荐）

如果用的是更流行的SweetAlert2，回调名称和参数配置略有不同：

var share_friends = function(e){ 
  Swal.fire({ 
    title: "<i>Title</i>", 
    html: share_social, // 新版用html替代content
    confirmButtonText: "V <u>redu</u>",
    // 新版的弹窗完成渲染回调
    didOpen: function() {
      $("#share").jsSocials({ 
        shares: ["facebook", "twitter", "email"]
      });
    }
  }); 
}

var share_social = document.createElement("div"); 
share_social.id = 'share';

额外提示 #

如果还是没生效，可以在回调函数里加一行调试代码：console.log($("#share").length)，如果输出是1，说明元素已找到，问题可能出在jsSocials的配置；如果输出是0，那就是回调时机不对，需要确认你用的SweetAlert版本对应的回调名称。

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