可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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&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>
回答1:
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()
回答2:
I recently ran in to issues with using AddThis on an all AJAX site and was able to come up with a couple of solutions for this issue.
It turns out there is a variable that you can pass when loading the AJAX script as well as a way to re-initialize the script if the DOM is reloaded via AJAX.
I have posted the full solution in detail on my blog here:
http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/
To briefly summarize, the solution is loading AddThis with the variable domready=1 appended, and re-initializing the script by deleting the initial load and then reloading the script dynamically:
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis){
window.addthis = null;
}
$.getScript( script );
回答3:
addthis.toolbox(".addthis_toolbox");
回答4:
Ran in the same problem and this solved it for me in all major browsers (IE6+, FF, Safari in MAC/XP):
http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/comment-page-1/#comment-24
回答5:
It seems like the script is calling the onLoad event of javascript and using this ajax call won't actually trigger that event. You could try other "share this" widget?
Like http://sharethis.com/#STS=g12m3ugh.21zb
or pre-load that button?
Can you post a little bit more of the story on what are you doing?
回答6:
Is details.html a fully compliant page on it's own? HTML, BODY, HEAD tags, etc?
If so, I think things can get kind screwy when you try to load it into another page. I would either change details.html to just include the barebones markup that you need - or - if you need it to still be individually accessible - you could use jQuery to strip out the needed bits after the ajax call and only inject that portion.
Details.html
<html>
<head>
</head>
<body>
<div id="details">
The needy bits.......
</div>
</body>
</html>
Index.html
$("#targetDivID").load("detail.html #details");
回答7:
Add this snippet of .js to the .html you are loading. Replace "#atbutton" with your button's selector.
addthis.button("#atbutton");