6

Facebookは、次のコードをページに配置するように指示しています。

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

その代わりに、関数でラップします。

function ReloadSocialSharing() {
    //facebook
    (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&appId=myappid";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

そしてそれを内部と呼びます：$(function () { }

これで、「いいね」ボタンとFacebookパネルを介したコメントがすべて表示され、正常に機能します。次に、AJAX呼び出しを行い、新しいhtml要素をページに取り込みます。これらには、私の元のフィールドにあったものと同様の適切なFacebookマークアップがすでにあります。私は次のようにajax呼び出しを行います：

$('#search').ajaxSubmit(GetSearchAjaxFormOptions(!isDefault, element));

function GetSearchAjaxFormOptions(displayResetPreferencesButton, giveMeFocus) {
    return {
        target: '#search-results',
        data: GetSearchData(),
        success: function () { RunAfterSearchResultsAreReturned(giveMeFocus) },
        error: function (error) {
            alert("Oops. There was an error.")
        }
    };
}

RunAfterSearchResultsAreReturned() {
   ........
   ReloadSocialSharing();
}

これはすべてうまく機能しますが、Ajax呼び出しを介して追加された新しいソーシャル共有要素は配線されておらず、機能しません。私は何が欠けていますか？

ありがとう！

注：FB.XFBML.parse（）の使用に関する注意事項を見てきました。しかし、私はXFBMLを避けようとしています。

4

1 に答える 1

4

あなたの試みがうまくいかない（主な）理由は、次の行のためです：

if (d.getElementById(id)) return;

つまり、コードは facebook スクリプト (インクルードされた残りのコードを使用して動的に追加したもの) が既に存在するかどうかをチェックし、存在する場合は再度インクルードしません。重複除外には理由があると思いますが、コードを再実行して (スクリプトが 2 回追加されていることを確認して) テストしましたが、成功しませんでした。

XFBML に関するあなたのメモを見ましたFB.XFBML.parse()が、実際に使用したマークアップが HTML5 のものであっても、(引数なしで) 呼び出しが機能するようです:

setTimeout(function() {
    $('<div class="fb-like" data-send="false" data-layout="standard"
        data-width="450" data-show-faces="false" data-colorscheme="light"
       data-action="like"></div>').appendTo('#test');
    FB.XFBML.parse();
}, 2000);

jsFiddleでの作業例。

于 2013-01-31T08:45:21.197 に答える