javascriptjqueryajaxaddthis

AddThis button will not work inside AJAX, but will work normally


Basically, this is what I'm doing. User visits site, loads "index.html" Within index.html, it automatically loads, through AJAX, "details.html" into a DIV. I put an ADDTHIS button on "details.html". However, for some reason , the roll-over doesn't work.

When I visit details.html in the browser, the roll-over works. I'm guessing it's because of the AJAX?

<a class="addthis_button"  href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4adf7e45288f5b21">
<img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0;margin-top:16px;"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4adf7e45288f5b21"></script>

Solution

  • if i understand your question correctly, in the callback of the ajax function, bind the roll-over to the add-this button.

     $.ajax({
       type: "POST",
       url: "some.php",
       data: "name=John&location=Boston",
       success: function(){
         $('.addthis_button').hover(
           function(){
             //do mouse over
           },function(){
             //do mouse out
         });
       }
     });
    

    you can also try

    $('.addthis_button').live('mouseover',function(){//do mouseover});
    $('.addthis_button').live('mouseout',function(){//do mouseout});
    

    i've never used live, but it seems like it would work for you since your add_this button's get created after the $(document).ready()