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でそれを使用して運が良ければ.
ありがとう :)