AddThis not working after ajax load

问题:

I have the AddThis js for bookmarking the details to the calender.This is working correctly on page load,but I do some filtering using ajax load and replace the html, after this the AddThis button not showing.here is my code for 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: 

回答1:

Use this script when you load new content:

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

It is only solution for addthis_inline_share_toolbox!

addthis.toolbox() works only when you have specified buttons inside addthis element (mostly older versions).

回答2:

After 1 hour of trying custom codes i found this one that works perfect.

$(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");
});

This is the source

回答3:

You shouldn't need to reset the AddThis variables and reload the script, if you simply call:

addthis.toolbox();

this should re-render the buttons according to whatever configuration you have specified. Take a look at the documentation here:

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

回答4:

Would have added this as a comment to Sol's answer, but I lack the rep. The actual syntax for reloading the toolbox is to pass in the class selector for the toolbox, however this assumes that you have already init'ed addthis

 addthis.toolbox('.addthis_toolbox')

回答5:

You can use live method.

With jQuery 1.4.2 $('.eventSelect').live('change', function(){ works with FF, Safari, Opera, but not for IE

回答6:

Gary's answer did it for me: https://stackoverflow.com/a/21176470/3656694

Then running addthis.toolbox('.addthis_toolbox') re-initialized addthis for me.

Hope this helps someone! :)

回答7:

In order to work with ajax load and/or multiple addthis instances on the same page you need to insert the elements inside the 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>

and then after your ajax is done run addthis.toolbox('.addthis_toolbox')

回答8:

If you are using the AddThis share but­tons, you might have noticed that once you ini­tial­ize it on page load, it does not really work for con­tent that is loaded via ajax after the fact.

i.e. AddThis is unaware of fresly loaded con­tent. The fix for this is pretty sim­ple. Just ask AddThis to refresh as fol­lows, and it will auto­mat­i­cally regen­er­ate the cor­rect share links for newly loaded content

addthis.layers.refresh();

回答9:

I realized that my adblocker was responsible for

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

not working. (addthis.layers.refresh was undefined.) This is strange since I have the exact same code on 4 sites, but only on the one it doesn't work. So if you are having problems, try turning off your adblocker to see if anything changes.

The code Alex posted worked for me when I had my adblocker turned on (uBlock origin). I decided to run it as follows, so that I do it the "right" way and only if it won't work, then run the alternative way.

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");
    }
}

回答10:

i resolve this! Link of Documentation

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>