javascript - 模态 Facebook

Question

我在多步 Bootstrap 模式窗口中有一个 Facebook 的“赞”按钮和一个“Facepile”轮播，但它们仅在您翻页并返回到它们要显示的页面时才会出现。第一次查看页面时，它们未加载。

---

<script>
function displayPage(pageId) {
    $('div[id^="display"]').hide();
    $('#display'+pageId).show();
    $('.step').removeClass("active");
    $('#step'+pageId).addClass("active");


    if(pageId == 1) {
        (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_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }
        (document, 'script', 'facebook-jssdk'));

    };
}
</script>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <hgroup class="block fixed">
            <h3>Header</h3>
            <h4>Subheader</h4>
        </hgroup>
    </div>
    <div class="modal-body" id="content">
        <div id="display1" style="display:none;">
            <h1>LIKE OUR PAGE</h1>
            <div id="fb-root"></div>
            <div class="fb-like" data-href="https://www.facebook.com/myaddress" data-width="125" data-height="35" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
            <br><br>
            <div class="fb-facepile" data-href="https://www.facebook.com/myaddress" data-width="395" data-max-rows="1" data-colorscheme="light" data-size="large" data-show-count="true"></div>
        </div>
    </div>
</div>

Answer 1

最初我只是在调用模态的同一函数中使用了 facebook 函数。当我这样修改它时，它起作用了..

$(document).ready(function() {
    $("#myModal").on("show", function() {
        (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_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
});

function displayPage(pageId) {
    currentPageId = pageId;
    $('div[id^="display"]').hide();
    $('#display'+pageId).show();
    $('.step').removeClass("active");
    $('#step'+pageId).addClass("active");

    if(pageId == 1 || pageId == 2) {
    FB.XFBML.parse();