javascript - 社交媒体订阅/关注/喜欢链接不适用于动态添加的内容

Question

这个问题已经有答案了:

facebook social plug-in not showing up when added dynamically (2 个回答)

已关闭 7 年前。

使用 HTML 添加动态内容以订阅/关注/喜欢 YouTube channel 、Twitter 帐户、Facebook 页面，

订阅代码仅适用于初始静态加载的内容，不适用于动态加载的内容(在代码笔中，我使用超时模拟了动态内容)。

静态内容存在于页面加载本身中，该页面正常工作，即，订阅社交媒体页面的代码仅在第一次执行，而不是针对动态内容。

CodePen:http://codepen.io/shmdhussain/pen/YWBBZw

有人可以帮我解决这个问题吗？如果您面临同样的情况，请提出建议

jQuery(function($){
  
  setTimeout(function(){
    var htmlcontent1 = '<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>';
    var htmlcontent2 = '<a class="twitter-follow-button"   href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>';
    
      var htmlcontent3 = '<div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>';
    $(".dynadiv1").html(htmlcontent1);
    $(".dynadiv2").html(htmlcontent2);
    $(".dynadiv3").html(htmlcontent3);
  }, 9000);
})

<script src="https://apis.google.com/js/platform.js"></script>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>



<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<h1>static Content</h1>
<div class="staticdiv1 youtube">
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>

</div>
<br />
<br />
<div class="staticdiv2 twitter">
  <a class="twitter-follow-button"   href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>
</div>
<div class="staticdiv3 fb">
  <div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</div>
<h1>Dynamic Content</h1>
<div class="dynadiv1 youtube">

</div>
<br />
<br />
<div class="dynadiv2 twitter">

</div>
<br />
<br />
<div class="dynadiv3 fb">

</div>

我的解决方案。

Answer 1

您需要使用FB.XFBML.parse告诉Facebook有新内容。 https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/