jquery - Addthis 不适用于 Ajax

Question

我正在使用 Ajax 加载所有文章，但 Addthis 功能不正确

 $thisChild.load( permLink + ' #thePostStuff', function() {

在所述 .load() 函数的回调中，我添加了这段代码以引入 Addthis 共享功能：

var script = 'http://s7.addthis.com/js/300/addthis_widget.js?domready=1#pubid=MY-PUB-ID';
if (window.addthis){
    window.addthis = null;
}
$.getScript( script );

加载 Addthis 脚本的 ajax 请求调用的 permLink 文件内容中的代码如下：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
        addthis:url="<?php the_permalink(); ?>"
        addthis:title="<?php the_title(); ?>"
        addthis:description="<?php the_excerpt(); ?>"> 
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->

问题是，addthis 没有按预期加载。第一次打开文章时它可以正常工作，但在其他任何时候（除非页面被刷新）它都无法包含显示文章被共享次数的数字，当我检查元素时显示如下：<a class="addthis_button_expanded" target="_blank" title="View more services" href="#">1</a>

编辑：

尝试了一个已知的修复：$.getScript( script , function() { addthis.init(); });但这并没有解决问题。

编辑 2012 年 8 月 14 日

该网站是http://epicvan.com，我只是删除了这些数字，因为我在处理它时从未想出修复方法。该项目是几个月前完成的，所以我不会测试新的答案。如果您遇到同样的问题，希望他们可以帮助您！干杯

score 36 · Accepted Answer

我有同样的问题。用以下方法修复它。希望也能为您解决。

原来的：

    var script = 'http://s7.addthis.com/js/300/addthis_widget.js?domready=1#pubid=MY-PUB-ID';
if (window.addthis){
    window.addthis = null;
}
$.getScript( script );

新的：

<script>
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
}
$.getScript(script);
</script>

score 5 · Accepted Answer

我在这里写了一个非常详细的描述https://stackoverflow.com/a/16950881/1118070但是，要点是这addthis.toolbox(".addthis_toolbox"); 是正确的解决方案，但重要的是要注意每次加载新的 ajax 内容时都应该调用它。

html

 <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook" style="cursor:pointer"></a> 
    <a class="addthis_button_twitter" style="cursor:pointer"></a> 
    <a class="addthis_button_email" style="cursor:pointer"></a>
 </div>

javascript

// onload of the ajax content
addthis.toolbox('.addthis_toolbox');

另请注意，任何作为 iframe 加载的内容，例如 facebook 之类的计数器，如果嵌套在“.addthis_toolbox”容器中，则会导致问题。我建议将它放在它自己的容器中并在它们上调用 toolbox() 方法。

有关更多详细信息，请参阅我的链接。

score 4 · Accepted Answer

在尝试自定义代码 1 小时后，我发现这个代码非常完美。

$(document).ajaxStop(function() {
  if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
  }
  return $.getScript("http://s7.addthis.com/js/300/addthis_widget.js#pubid=sdive");
});

这是来源

score 2 · Accepted Answer

请尝试此链接给出的解决方案，

http://support.addthis.com/customer/portal/questions/399867-addthis-and-ajax-with-addthis-toolbox-

<script type="text/javascript">addthis.toolbox('.addthis_toolbox');</script>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=vijayk"></script>

因为我也面临同样的问题。但这可以通过以上几行来解决。希望这会有所帮助。

谢谢，维杰

score 1 · Accepted Answer

1

addthis.toolbox(".addthis_toolbox");

于 2013-04-28T13:38:04.220 回答

score 1 · Accepted Answer

Problem is that on a ajax call the #pubid is getting lost so AddThis doesn't know who is making the call.

This worked for me:

<script>
$.getScript("https://s7.addthis.com/js/300/addthis_widget.js#pubid=YOUR-ID", function () {
    addthis_config = { pubid: 'YOUR-ID' };
    addthis.init();
});
</script>

Found the answer to this issue on the support site of addthis.com: http://support.addthis.com/customer/portal/questions/240144-email-template-when-using-ajax-bug-?t=89322

score 0 · Accepted Answer

对于那些现在像我一样遇到这个问题的人，对我有用的代码是：

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=XXXXXXXXXXXXXXXXX"></script>
<script>
if (window.addthis) {
    // for others time force addthis to run again
    window.addthis.toolbox('.addthis_toolbox');
} else {
   // in the first time use autoload bu addthis
}
</script>

score 0 · Accepted Answer

前几天我阅读了这篇支持文章，它可能与您的问题有关：http: //support.addthis.com/customer/portal/questions/240144-email-template-when-using-ajax-bug- ?t =89322

如果我理解正确，他描述了第一次分享后，小部件与您的个人资料断开连接，并且以后的每个分享（没有刷新）都不会被跟踪或任何东西。他的解决方案是单独声明pubid。我不知道这是否有帮助，但我认为向您展示我在该主题上的发现不会有什么坏处:)

score 0 · Accepted Answer

在 AJAX 调用后执行这行代码对我有用：

addthis.layers.refresh();

下面是我的设置AddThis

脚本

<script type="text/javascript" 
        src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<my_pub_id>">
</script>

我把这段代码放在我想AddThis显示的地方

<div class="addthis_inline_share_toolbox_tvqk"></div>

我如何进行 AJAX 调用

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {

        // Update the DOM

        if (typeof(addthis) != 'undefined' && addthis != null) 
            addthis.layers.refresh();
    }
};
xhttp.open("POST", "<address_to_post_back_to>", true);
xhttp.send(<post_data>);

结果

jquery - Addthis 不适用于 Ajax

9 回答 9

Related

Reference