0

pinterest 画像ホバー ウィジェットを使用して、ユーザーが自分の Web サイトから自分の pinterest アカウントに画像をピン留めできる機能を追加しています。

ここにあるウィジェット: http://business.pinterest.com/widget-builder/#do_pin_it_button (ボタンタイプの下にある画像ホバーラジオボタンをクリックして、私が使用しているものを確認してください。)

ピンタレストが提供するコードを使用してコンテンツをロードするために ajax が使用されていない Web サイトの他のページで、ピンタレスト ボタンが正常に機能しています。

<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>

ただし、問題が発生するのは、ポップアップ ウィンドウに ajax を介してコンテンツをロードしているときに、そのコンテンツを含む pinterest ボタンをロードする必要がある場合です。ajax リクエストが完了するまで pinterest コードを読み込まないようにしましたが、今のところうまくいきません。これを試しました:

<script type="text/javascript">
jQuery(document).ajaxComplete(function() {
    (function(d){
     var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
     p.type = 'text/javascript';
     p.setAttribute('data-pin-hover', true);
     p.async = true;
     p.src = '//assets.pinterest.com/js/pinit.js';
     f.parentNode.insertBefore(p, f);
     }(document));
});
</script>

ajax が余分なコンテンツを DOM に挿入した後、上記の方法を使用してロードするまで、このページの他の場所に pinterest コードをロードしていません。私は他のいくつかの方法も試しましたが、他のトピックが関連していることがわかりましたが、どれも役に立ちませんでした。特に画像ホバーウィジェットで動作する他のソリューションを見つけることができなかったので、誰かがアドバイスをする前にAjaxでそれを使用して運が良ければ.

ありがとう :)

4

1 に答える 1