在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之前有任何运气，在任何建议之前都会很棒。

谢谢:)

来源

2013-04-30 trenthogan

我只是与“任何图像”按钮类型相同的问题。什么帮助这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);

希望它能帮助。

来源

2013-05-24 09:01:31

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

回答

相关问题