0

我正在使用 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>

在 ajax 将额外内容插入 DOM 之后，我不会在此页面上的其他任何地方加载 pinterest 代码，直到使用上述方法加载。我还尝试了其他一些方法，我发现它是围绕互联网的其他主题，但没有任何帮助。我还没有找到任何其他专门用于图像悬停小部件的解决方案，所以如果有人在使用 Ajax 之前有任何运气，那么任何建议都会很棒。

谢谢 ：）

4

1 回答 1

0

我只在“任何图像”按钮类型时遇到了同样的问题。这篇文章有帮助。

虽然我没有使用refreshPinterestButton()-function。我只是加载了脚本

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

希望能帮助到你。

于 2013-05-24T09:01:31.193 回答