Question

我正在尝试在动态加载的内容上加载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>

请帮忙。

Answer 1

@amit我遇到了和你一样的问题。经过一番研究，我找到了这个问题的根源。

如果您通过信息中心添加了addthis按钮，则会有一些快捷方式的html / js代码可以非常快速地将它们添加到您的网站中：

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

但addthis api doc表示将按钮添加到您网站的正式方式如下：

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

因此，如果您在“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>

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;

步骤2：动态（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>

Step-3：最后，在成功加载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');
    }
});

添加它不加载ajax内容

2 个答案: