如何动态添加插件？

Question

这是我的code：

HTML

<div id="fb-root"></div><script>window.fbAsyncInit = function() { FB.init({ appId: '1234', channelUrl: 'http://www.mywebsite.com/support/channel.html', status: true, cookie: true, xfbml: true }); }; (function(d) { var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); } (document)); </script>

<fb:like href="http://www.google.com" send="false" layout="button_count" width="auto" show_faces="true" font=""></fb:like>

<div style="padding-top:30px;">
    <a id="addNewLink" href="javascript:void(0);">Add New Facebook's "I Like"</a>
</div>

<div style="padding-top:30px;" id="newFBContent"></div>

的jQuery

$('#addNewLink').click(function () {
    $('#newFBContent').html('<fb:like href="http://www.facebook.com" send="false" layout="button_count" width="auto" show_faces="true" font=""></fb:like>')
});

在页面加载时，我渲染一个＆＃34;我喜欢插件＆＃34;。点击链接，我添加一个新链接，我也喜欢渲染它！事实上，如果我再次添加.js库，它会崩溃（显然）。

那么，我该如何渲染呢？

请注意：我想避免使用iFrame！

Answer 1

这应该做的工作：

FB.XFBML.parse( document.getElementById("newFBContent"), function() {
    //plugin rendered
});

在将新内容添加到DOM后，您应该调用FB.XFBML.parse。

Answer 2

你错过了一行，试试：

$('#addNewLink').click(function () {
    $('#newFBContent').html('<fb:like href="http://www.facebook.com" send="false" layout="button_count" width="auto" show_faces="true" font="" ></fb:like>')
//and parse
        FB.XFBML.parse(document.getElementById('newFBContent'));

});

Answer 3

将XFBML个元素添加到页面后，只需致电FB.XFBML.parse。

您还可以指定将在其中解析XFMBL标记的根节点。