在Ajax加载后添加Pinterest图像悬停小部件
问题描述:
我正在使用pinterest图像悬停小部件来添加用户将图像从我的网站挂到他们pinterest帐户的功能。在Ajax加载后添加Pinterest图像悬停小部件
的Widget这里找到:http://business.pinterest.com/widget-builder/#do_pin_it_button (点击下按钮式图像悬停单选按钮,看到我使用的一个。)
我有Pinterest的按钮在网站上的其他网页的工作得很好,没有阿贾克斯用于加载使用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的其他地方这个页面,直到用上面的方法阿贾克斯插入额外的内容到DOM后加载。我也尝试了一些其他的方法,我发现围绕interent的其他主题,但没有任何帮助。我还没有找到任何专门用于图像悬停小部件的其他解决方案,所以如果任何人在使用Ajax之前有任何运气,在任何建议之前都会很棒。
谢谢:)
答
我只是与“任何图像”按钮类型相同的问题。什么帮助这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);
希望它能帮助。