Question

我有一个网站，通过AJAX加载页面的一部分（#main-inner块），以加快导航速度。此页面片段可以包含各种社交按钮（twitter，G +，facebook），这些按钮在AJAX调用成功完成并且HTML已注入页面后初始化。

当访问者在页面上时，这个AJAX加载可能会发生几次：每次移除#main-inner块（通过jQuery）并在AJAX调用成功时重新创建。

我的问题是facebook“like”按钮仅在第一次AJAX调用后正确初始化。在以下调用中，facebook按钮不再出现，稍后，控制台会显示以下错误消息：fb:like failed to resize in 45s。

其他社交按钮工作正常。

这是我在#main-inner块的内容发生变化后用来初始化facebook按钮的功能：

var loadFacebook = function () {
    if ($('.fb-like').length){
        var options = {
            status: true,
            cookie: true,
            xfbml: true,
            appId: XXXXXXXXX
        };
        if (typeof (FB) != 'undefined') {
            // FB.init(options);
            FB.XFBML.parse(document.getElementById('main-inner'));
        } else {
            $.getScript('//connect.facebook.net/fr_FR/all.js', function () {
                FB.init(options);
            });
        }
    }
};

为什么它只在第一次工作？...有没有办法在重新初始化新按钮之前重置或卸载前一个按钮？

Answer 1

我已经设法通过在每次重新初始化时清空FV变量来重置（并重新加载）facebook按钮。所以现在的功能是：

var loadFacebook = function () {
    if ($('.fb-like').length){
        var options = {
            status: true,
            cookie: true,
            xfbml: true,
            version: 'v2.3',
            appId: XXXXXXXXX
        };
        FB = null; // <- that's the key
        $.getScript('//connect.facebook.net/fr_FR/all.js', function () {
            FB.init(options);
        });
    }
};

我仍然很想知道是否有更好（更干净？）的方式来做到这一点。

但是我不确定这是否足够，因为虽然现在在每个AJAX加载后正确显示了like按钮，但它似乎无法读取页面中新注入ajax的数据，因此弹出窗口中的所有字段（单击按钮时打开）为空......： - （

Ajax加载FB“喜欢”按钮仅在第一次工作

1 个答案: