在Ajax加載后添加Pinterest圖像懸停窗口小部件

Question

我正在使用pinterest圖像懸停窗口小部件來增加用戶將我的網站上的圖像固定到其pinterest帳戶的功能。

此處找到的小部件： http : //business.pinterest.com/widget-builder/#do_pin_it_button （單擊按鈕類型下的圖像懸停單選按鈕以查看我正在使用的按鈕。）

我的pinterest按鈕在網站上的其他頁面上都可以正常工作，其中不使用ajax來使用pinterest提供的代碼加載任何內容：

<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>

我不會在此頁面上的其他任何地方加載pinterest代碼，直到ajax將多余的內容插入DOM后使用上述方法加載為止。 我還嘗試了其他一些方法，但在Interent上發現了其他主題，但沒有一個幫助。 我還沒有找到其他專門用於圖像懸停窗口小部件的解決方案，因此，如果有人在使用任何建議之前都可以在Ajax上使用它，那么是否有運氣。

謝謝 ：）

Answer 1

我只有“任何圖像”按鈕類型存在相同的問題。 這篇文章對我有所幫助。

盡管我沒有使用refreshPinterestButton()函數。 我只是加載了腳本

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

在第一頁加載和隨后的ajax調用中，我執行了以下部分：

//remove and add pinterest js
pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
pinJs.remove();
js = document.createElement('script');
js.src = pinJs.attr('src');
js.type = 'text/javascript';
document.body.appendChild(js);

希望能幫助到你。