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按钮。我已经尝试不加载pinterest代码，直到ajax请求完成，但到目前为止没有运气。试过这个：

<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后使用上述方法加载。我还尝试了一些其他的方法我已经找到了围绕互联网的其他主题，但没有一个帮助。我还没有找到任何其他专门用于图像悬停小部件的解决方案，所以如果有任何人在使用Ajax之前有任何好运，那么任何建议都会很棒。

谢谢：）

Answer 1

我只有“Any Image”按钮类型才遇到同样的问题。这有助于post。

虽然我没有使用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);

希望它有所帮助。

在Ajax加载后添加Pinterest图像悬停小部件

1 个答案: