Addthis在ajax内容中无法加载

Question

我正在尝试在动态加载的内容上加载addthis按钮，但即使脚本已加载，addthis工具栏也不会出现。

jQuery(".somediv").html(response); // dynamically loaded content
jQuery.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a011f32e6cd338")
    .done(function () {
        addthis.init();
        addthis.toolbox('.addthis_sharing_toolbox');
    })

以下是HTML内容：

<div class="addthis_sharing_toolbox"></div>

请帮忙。

- Amit

---

不。在头部区域，您需要先引入jQuery库，然后才能访问任何jQuery功能。 - karthikr

你能发布完整的代码吗？ - Antoine Cloutier

jQuery(".somediv").html(response); 这个 div 包含了 AddThis 工具栏。在内容加载完成后，我会调用 jQuery.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a011f32e6cd338") .done(function() { addthis.init(); addthis.toolbox('.addthis_sharing_toolbox'); }); - Amit

你能在 jsfiddle 上复制你的问题吗？ - Antoine Cloutier

请分享通过“response”变量包含的HTML。 - Jehanzeb.Malik

Answer 1

@amit，我和你面临着相同的问题。经过一些研究，我找到了这个问题的根源。

如果你是通过仪表板添加AddThis按钮的话，那么有一些快捷HTML/JS代码可以让它们很快地出现在你的网站上：

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>

但是按照addthis api文档中所述的正式方式将按钮添加到您的网站上，需要像这样：

<div class="addthis_toolbox" data-url="domain.com" data-title="title">
    <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>

因此，如果您在'class addthis_sharing_toolbox'的div框中添加以下行，它最终将起作用。

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

- David

---

addthis_sharing_toolbox 代码是用于我们的仪表板配置工具，而您添加的代码是用于我们的高级配置工具。我们正在努力为我们的仪表板配置工具启用 AJAX。 - Paul

@Paul，现在有API可以用吗？ - Paul

Answer 2

步骤1：将以下代码放入主模板中，从该模板中调用ajax并显示输出：

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=**YOUR-PUB-ID**" async="async"></script>
//So that, we are inserting this AddThis JS source only for once;

步骤二：动态（ajax）内容应该包含以下addthis行以及其他内容：

<div class="addthis_sharing_toolbox">
    <a class="addthis_button_email" style="cursor:pointer"></a>
    <a class="addthis_button_facebook" style="cursor:pointer"></a>
    <a class="addthis_button_twitter" style="cursor:pointer"></a>
    <a class="addthis_button_linkedin" style="cursor:pointer"></a>
</div>

第三步：最后，成功加载ajax后请运行以下代码，并使用回调函数；

addthis.toolbox('.addthis_sharing_toolbox');

例如：

$.ajax({
    type: "GET",
    url: MY_URL,
    //......
    success: function(data){
        //......
        $("#MY-DIV").html(data); //THIS IS IMPORTANT TO INSERT THE DYNAMIC DATA INTO THE DOM BEFORE CALLING THE FOLLOWING TRIGGER;
        addthis.toolbox('.addthis_sharing_toolbox');
    }
});

- Reza Mamun