添加到此功能在ajax加载后无法正常工作

Question

我在网页上使用了AddThis js来添加日历详情的书签。在页面加载时，这个功能正常运作，但是当我用ajax进行一些筛选，并替换HTML后，AddThis按钮就无法显示了。以下是我的ajax代码。

$('document').ready(function () {

    $('.eventSelect').change(function () {
       var selectedDate = $('#eventDate').val();
        var keyword = $('#eventsearch').val();
        var url = "/EventsHome?eventDate=" + selectedDate + "&keyword=" + keyword;
       $.ajax({
           type: "GET"
          , url: url
          , success: function (data) {
              console.log($(data).find(".eventList").html());
              $(".eventList").html($(data).find(".eventList").html());
             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);

             }
          , error: function (XMLHttpRequest, textStatus, errorThrown) {

          }, comeplete: 

- Arun

---

@jogesh_pi 你能解释一下吗？ - Arun

window.addthis = null;，你是指要删除Dom吗？而$.getScript(script);，你会在脚本中获取按钮吗？ - Flying Fisher

@Karthick Kumar Ganesh：您不应该在问题中编辑源代码，因为这可能是提问者缺失的错误。我会为您还原那部分内容。 - GitaarLAB

是的，我从文档中找到了它。 - Arun

Answer 1

当您加载新内容时，请使用此脚本：

if(typeof addthis !== 'undefined') { addthis.layers.refresh(); }

这是 addthis_inline_share_toolbox 的唯一解决方案！

只有在 addthis 元素中指定了按钮（大多数情况是旧版本），addthis.toolbox() 才能正常工作。

- Jan Šafránek

---

这应该是被批准的评论。 - Jeff Shain

Answer 2

如果你只是调用以下代码：

``` addthis.toolbox('.addthis_toolbox'); ```

你就不需要重置AddThis变量和重新加载脚本。

addthis.toolbox();

这应该根据您指定的配置重新渲染按钮。请在此处查看文档：

http://support.addthis.com/customer/portal/articles/1293805-using-addthis-asynchronously#.UvvWw0JdWTM

- Sol

Answer 3

在尝试了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");
});

这是源代码。

- Alex

Answer 4

我想把这个作为对Sol的回答 的评论，但是我的声望不够。重新加载工具箱的实际语法是传递工具箱的类选择器，但这假设你已经初始化了addthis。

 addthis.toolbox('.addthis_toolbox')

- srussking

Answer 5

为了在同一页上使用ajax加载和/或多个addthis实例，您需要将元素插入div中：

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

在你的ajax完成后运行addthis.toolbox('.addthis_toolbox')

- Claudiu Creanga

Answer 6

Gary的回答对我很有帮助： https://dev59.com/HWUp5IYBdhLWcg3wTGTe#21176470 然后运行 addthis.toolbox('.addthis_toolbox') 重新初始化了addthis。

希望这能帮到某些人！ :)

- RestlessWeb

---

这对我有用...我想分享一下，我将addthis作为单独的组件，这样我就可以将其应用于多个页面，所以我最终得到了这个： `let addscript = document.createElement('script'); addscript.type = 'text/javascript'; addscript.setAttribute( 'src', '//s7.addthis.com/js/300/addthis_widget.js#pubid=###' ); document.body!.appendChild(addscript); window.addthis.toolbox('.addthis_toolbox');` - bluePearl

Answer 7

我意识到我的广告拦截器有责任

if(typeof addthis !== 'undefined') { addthis.layers.refresh(); }

不起作用（addthis.layers.refresh未定义）。这很奇怪，因为我在4个网站上都有完全相同的代码，但只有一个网站不起作用。所以如果你遇到问题，请尝试关闭广告拦截器，看看是否会有任何变化。

当我开启我的广告拦截器（uBlock origin）时，Alex发布的代码对我有效。我决定按如下方式运行它，以便我能够以“正确”的方式运行它，如果它不能工作，那么再运行另一种方式。

if (typeof addthis !== 'undefined') {
    if (typeof addthis.layers.refresh !== 'undefined' && $.isFunction(addthis.layers.refresh)) {
        addthis.layers.refresh();
    } else {
        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/YOURLINK");
    }
}

- VoidZA

Answer 8

您可以使用live方法。

在jQuery 1.4.2中，$('.eventSelect').live('change', function(){适用于火狐浏览器、Safari浏览器和Opera浏览器，但不适用于IE浏览器。

- Chirag Parekh

Answer 9

如果您正在使用AddThis共享按钮，您可能已经注意到，一旦您在页面加载时初始化它，它对于事实上通过ajax加载的内容并不真正起作用。即AddThis不知道新加载的内容。解决这个问题非常简单。只需按照以下方式要求AddThis进行刷新，它将自动为新加载的内容重新生成正确的共享链接。

addthis.layers.refresh();

- Ahmet Bozdoğan

Answer 10

我解决了这个问题！ 文档链接

addthis_share.title = 'title of shared object';
addthis_share.url = 'URL to share';
addthis_share.description = 'description of shared';
addthis_share.swfurl ='URL of a Flash object to share, along with the link';
addthis_share.width ='ideal width of any provided Flash object';
addthis_share.height ='ideal height of any provide Flash object';
addthis_share.email_template ='name of template to use for emailed shares ';
addthis_share.email_vars ='associative array mapping custom email variables to values ';

<script type="text/javascript">
    var addthis_share = addthis_share||{
            url_transforms : {
                clean: true
            }
        };
</script>
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e9c308d658c185a&async=1"></script>

- Michel Dos Santos Kuguio