AddThis按钮在AJAX内部不起作用,但可以正常工作
基本上,这就是我正在做的事情。 用户访问网站,加载“index.html” 在index.html 中,它通过AJAX 自动将“details.html”加载到DIV 中。 我在“details.html”上放置了一个 ADDTHIS 按钮。然而,由于某种原因,翻转不起作用。
当我在浏览器中访问details.html时,翻转起作用了。我猜这是因为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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
我最近在一个全 AJAX 站点上使用 AddThis 时遇到了问题,并针对这个问题提出了几个解决方案。
事实证明,您可以在加载 AJAX 脚本时传递一个变量,以及在通过 AJAX 重新加载 DOM 时重新初始化脚本的方法。
我已在我的博客上详细发布了完整的解决方案:
http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/
简单总结一下,解决方案是使用以下命令加载 AddThis附加变量 domready=1,并通过删除初始加载然后动态重新加载脚本来重新初始化脚本:
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:
addthis.toolbox(".addthis_toolbox");
addthis.toolbox(".addthis_toolbox");
如果我正确理解你的问题,在 ajax 函数的回调中,将翻转绑定到 add-this 按钮。
您也可以尝试
我从未使用过 live,但它似乎对您有用,因为您的 add_this 按钮是在 $(document).ready() 之后创建的
if i understand your question correctly, in the callback of the ajax function, bind the roll-over to the add-this button.
you can also try
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()
遇到了同样的问题,这在所有主要浏览器(IE6+、FF、MAC/XP 中的 Safari)中为我解决了这个问题:
http://joecurlee.com/2010/01/21/how-to-use- addthis-with-ajax-and-overflowauto/comment-page-1/#comment-24
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
我也有同样的问题。使用以下代码修复它。我希望这也能帮到你。
原始方法:
新方法:
在 AJAX REQUEST 中,您可以这样使用:-
I had the same problem. Fixed it with the following code. I hope that fixes it for you too.
Original Method:
New Method:
In AJAX REQUEST you can use like this:-
看起来脚本正在调用 javascript 的 onLoad 事件,并且使用此 ajax 调用实际上不会触发该事件。您可以尝试其他“共享此”小部件吗?
就像http://sharethis.com/#STS=g12m3ugh.21zb
或预加载该按钮?
你能发布更多关于你在做什么的故事吗?
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?
Details.html 本身是一个完全兼容的页面吗? HTML、BODY、HEAD 标签等?
如果是这样,我认为当您尝试将其加载到另一个页面时,事情可能会变得有点混乱。我要么更改details.html以仅包含您需要的准系统标记 - 或者 - 如果您需要它仍然可以单独访问 - 您可以使用 jQuery 在 ajax 调用后删除所需的位并仅注入该部分。
详情.html
索引.html
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
Index.html
将这段 .js 添加到您正在加载的 .html 中。将“#atbutton”替换为按钮的选择器。
addthis.button("#atbutton");
Add this snippet of .js to the .html you are loading. Replace "#atbutton" with your button's selector.
addthis.button("#atbutton");