JavaScript的:当点击加载2007-06-18加载、JavaScript

2023-09-10 16:15:44 作者:嗨翻世界!

我一直百思不得其解与此相当长一段时间,不能让它的工作。这里的情况。我想要一个社会媒体栏只显示,如果人们点击一些DIV。它不应该被加载,除非有人点击该分区。对于社会化媒体我有添加此,和Google + 1图标。但我不能让他们通过这样的外部调用来加载。这里是code到目前为止:

I have been puzzling with this for quite a while and can't get it to work. Here is the situation. I want a SOCIAL MEDIA bar to ONLY appear if people click some DIV. It should not be loaded unless people click the div. For Social Media I have ADD THIS, and the GOOGLE+1 icon. But I can not get them to load by such an external call. Here is the code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html');
            $.getScript('js-part.js');
    });

});
</script> 
</head> 
<body> 


<div id="socialmedia"> 
 Show the Social Media
</div> 

<div id="loadhere"> 

</div> 


</body> 
</html> 

在HTML部分,我有一个需要加载的HTML信息:

In the HTML part I have the HTML info that needs to be loaded:

HTML-part.html:

html-part.html:

<!-- AddThis Button BEGIN --> 
    <div class="addthis_toolbox addthis_default_style "> 
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
        <a class="addthis_button_tweet"></a> 
        <a class="addthis_counter addthis_pill_style"></a> 
    </div> 

    <!-- AddThis Button END --> 
    <g:plusone size="medium" id="gg"></g:plusone> 
</div> 

有关JS的一部分,我很努力。以下是需要加载:

For the JS part I am struggling. Here is what needs to be loaded:

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID"></script> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 

我试图用一种方式来调用它们之一:

I have tried to call them one by one:

$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID');
$.getScript('https://apis.google.com/js/plusone.js');

不过,我想这是一个跨域问题......?

But I guess this is a crossdomain problem...?

如果我使用PHP来获取内容,并加载本地PHP文件,它仍然无法正常工作。在这个花一天时间......这是可能实现的呢?

If I use PHP to obtain the content, and load a local PHP file, it still does not work. Before spending one more day on this... is this possible to achieve?

推荐答案

这里的问题是,在前页code类火灾的DOM准备好事件。当你用jQuery加载的DOM已经加载所以不执行code为。解决方法是使用 addthis.init()方法强制code执行后您加载code。没有跨域问题或任何东西。

The problem here is that addthis code fires on dom ready event. When you load it with jQuery the dom has already been loaded so the code is not executed. The fix is to use addthis.init() method to force the code execution after you load the code. There is no cross domain problem or anything.

请注意,根据前页文档应该可以通过只传递一个GET变量通过窗口小部件的URL像这样 http://s7.addthis.com/js/250/addthis_widget.js#pubid= [资料编号]放大器; domready中= 1 ,但它没'T为我工作。

Note that according to addthis documentation it should be possible by just passing a get variable through the widget url like this http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1 but it didn't work for me.

我也建议你保存的HTML在一个字符串变量,这样你就不必做unnecesary请求一点点静态html​​。

I would also recommend you store the html in a string variable, that way you don't have to do unnecesary requests for a little static html.

查看工作演示在这里: http://jsfiddle.net/z7zrK/3/

$("#socialmedia").click(function(){
    var add_this_html =
    '<div class="addthis_toolbox addthis_default_style ">'+
    '<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>'+
    '<a class="addthis_button_tweet"></a>'+        
    '<a class="addthis_counter addthis_pill_style">'+
    '</a>'+ 
    '</div>'+
    '<g:plusone size="medium" id="gg"></g:plusone>';

    $("#loadhere").html(add_this_html);
    $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx',
    function(){
        addthis.init(); //callback function for script loading
    });  

  $.getScript('https://apis.google.com/js/plusone.js');
});