Javascript：单击后加载AddThis_Javascript_Jquery_Ajax

Javascript：单击后加载AddThis

javascript jquery ajax

Javascript：单击后加载AddThis,javascript,jquery,ajax,Javascript,Jquery,Ajax,我对此困惑了很长一段时间，无法让它发挥作用。情况是这样的。我希望只有当人们单击某个DIV时才会显示社交媒体栏。除非人们单击该DIV，否则不应加载该栏。对于社交媒体，我添加了此栏和GOOGLE+1图标。但我无法通过这样的外部呼叫让它们加载。以下是迄今为止的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns

我对此困惑了很长一段时间，无法让它发挥作用。情况是这样的。我希望只有当人们单击某个DIV时才会显示社交媒体栏。除非人们单击该DIV，否则不应加载该栏。对于社交媒体，我添加了此栏和GOOGLE+1图标。但我无法通过这样的外部呼叫让它们加载。以下是迄今为止的代码：

<!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>

但我想这是一个跨领域的问题

如果我使用PHP获取内容，并加载一个本地PHP文件，它仍然不起作用。在花一天时间做这件事之前。。。这有可能实现吗

回答你的官方问题，是的，我相信这是可能实现的

但是，为了进一步说明这一点，我相信您可能希望尝试使用外部脚本和外部标记的加载顺序。在处理此类异步操作时，我们发现一个有趣的情况是，除非您特别说明，否则它们并不总是按照您希望的顺序完成、加载或执行。jQuery允许您通过一些回调来实现这一点，这些回调可以传递给

getScript

和

load

方法

其他域上的javascript文件也不应该存在“跨域”问题，尽管在加载HTML时确实存在

我不确定这是否能解决你的问题，但我觉得这确实值得一试。您可以尝试确保在脚本执行以下操作之前加载标记：

$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html', function() {
                // this waits until the "html-part.html" has finished loading...
                 $.getScript('js-part.js');
            });
    });
});

现在，我们还应该询问您是如何构建“js part.js”文件的。（你只展示了你想要的，而不是你已经构建的。）如果这是一个真正的JS文件，你不能仅仅使用一些HTML

标签来加载其他JS文件。（您可能希望在此文件中继续调用

getScript

，或者使用其他几种方法之一加载其他JS内容，例如手动将脚本元素附加到文档头，或者使用其他库等。）

祝你好运

这里的问题是addthis代码在

dom ready

事件上激发。当您使用jQuery加载它时，dom已经被加载，因此代码不会被执行。修复方法是使用

addthis.init（）

方法在加载代码后强制执行代码。没有跨域问题或其他任何问题

请注意，根据本文，只需通过小部件url传递get变量（如下

http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1

但它对我不起作用

我还建议您将html存储在一个字符串变量中，这样您就不必对一些静态html进行不必要的请求

请参见此处的工作演示：

$（“#社交媒体”）。单击（函数（）{
var add_this_html=
''+
''+
''+        
''+
''+ 
''+
'';
$（“#loadhere”）.html（添加此html）；
$.getScript（'http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx',
函数（）{
addthis.init（）；//用于加载脚本的回调函数
});  
$.getScript（'https://apis.google.com/js/plusone.js');
});

刚刚使用了amosrivera的答案（顺便说一句，给你一个大大的吻），遇到了另一个问题：

Addthis对象只能加载一次，因此当您在同一页面上有多个Addthis工具箱时，它可能只适用于第一次单击的工具箱

解决办法是：

if (window.addthis){ window.addthis = null; }

打电话之前

addthis.init();

以下是我刚刚做的，仅当文章悬停足够长的时间时才开始加载按钮：

HTML:


.....

JS:

//仅当用户在文章上停留超过800毫秒时才抛出AJAX调用
//然后在隐藏的div中加载按钮时显示微调器
//然后用加载的按钮替换微调器
$（函数（）{
变量t；
$（“article”）.hover（函数（）{
var=这个；
窗口清除超时（t）；
t=window.setTimeout（函数（）{
sharing_div=$（'sharing'，that）；
添加\u此\u html=
' \
\
\
';
if（共享分区查找（'.content div'）。长度==0）{
共享_div.find（'.spinner'）.show（）；
共享\u div.find（'.content'）.html（添加此\u html）；
共享\u div.find（'addthis\u toolbox'）.attr({
'addthis:url'：$（that.attr（'data-url'），
'addthis:title'：$（that.attr（'data-title'），
'addthis:description'：$（that.attr（'data-description'），
})
如果（window.addthis）{window.addthis=null；}//强制重新加载addthis
$.getScript（'http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1',
函数（）{
addthis.init（）；
setTimeout（函数（）{
共享_div.find（'.spinner'）.hide（）；
共享_div.find（'.content'）.show（）；
}, 2500);
});
}
}, 800);
});
});

$(function(){
    $("#socialmedia").live('click',function(){
            $("#loadhere").load('html-part.html', function() {
                // this waits until the "html-part.html" has finished loading...
                 $.getScript('js-part.js');
            });
    });
});

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

if (window.addthis){ window.addthis = null; }

addthis.init();

<article data-url="someUrl" data-title="someTitle" data-description="someDesc">
  .....
  <div class="sharing">
    <div class="spinner"></div>
    <div class="content"></div>
  </div>
</article>

// Only throw AJAX call if user hovered on article for more than 800ms
// Then show the spinner while loading buttons in a hidden div
// Then replace the spinner with the loaded buttons
$(function() {
  var t;
  $("article").hover(function() {
    var that = this;
    window.clearTimeout(t);
    t = window.setTimeout(function () {
      sharing_div = $('.sharing', that);
      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_google_plusone" g:plusone:size="medium"></a> \
</div>';
      if (sharing_div.find('.content div').length == 0) {
        sharing_div.find('.spinner').show();
        sharing_div.find('.content').html(add_this_html);
        sharing_div.find('addthis_toolbox').attr({
          'addthis:url': $(that).attr('data-url'),
          'addthis:title': $(that).attr('data-title'),
          'addthis:description': $(that).attr('data-description'),
        })
        if (window.addthis){ window.addthis = null; } // Forces addthis to reload
        $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1',
          function(){
            addthis.init();
            setTimeout(function() {
              sharing_div.find('.spinner').hide();
              sharing_div.find('.content').show();
            }, 2500);
        });
      }
    }, 800);
  });
});