在加载addthis脚本后向DOM添加addthis HTML

我的目标是将锚标签放在href="#share"处，并将其添加到twitter引导程序弹出窗口中并添加此按钮。我有这个工作。一些使这变得复杂的是，我将html添加到文档以及我试过的克隆.clone(true)，但由于某些原因事件没有跟随。在加载addthis脚本后向DOM添加addthis HTML

这里的例子：（点击图片上“共享”按钮）： http://reggi.myshopify.com/products/change-it-tee

问题更具体的是，当你点击社交图标没有任何反应。

下面是gist下面的代码。这是我需要的模块，它需要任何东西在href="#share"，并把它变成一个弹出式窗口，并在其中添加这个按钮。

define(["jquery", "jquery-bootstrap", "addthis"], function($, jb, at){ 

    var share = function(){ 

     var html = '<!-- AddThis Button BEGIN -->'+ 
      '<div class="addthis_toolbox addthis_floating_style addthis_32x32_style hide">'+ 
      '<a class="addthis_button_facebook"></a>'+ 
      '<a class="addthis_button_twitter"></a>'+ 
      '<a class="addthis_button_pinterest_share"></a>'+ 
      '<a class="addthis_button_tumblr"></a>'+ 
      '<a class="addthis_button_thefancy"></a>'+ 
      '<a class="addthis_button_compact"></a>'+ 
      '</div>'+ 
      '<!-- AddThis Button END -->'; 

     var template = '<div class="popover fade top in" id="share">'+ 
      '<div class="arrow"></div>'+ 
      '<div class="popover-content"></div>'+ 
      '</div>'; 

     var isVisible = false; 
     var clickedAway = true; 

     $("body").append(html); 

     var ignite = function(){ 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.src = 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=holstee'; 
      $("head").append(script); 
      console.log("ignition"); 
     }; 

     $('[href="#share"]') 
      .show() 
      .popover({ 
       content: function(){ 
        return $(".addthis_toolbox").clone().removeClass("hide"); 
       }, 
       html: true, 
       placement: "top", 
       template: template, 
       trigger: "manual" 
      }).click(function(event){ 
       event.preventDefault(); 
       var toggle = ($(this).data('toggle') == undefined) ? true : $(this).data('toggle'); 
       clickedAway = false; 
       if(toggle){ 
        $(this).popover("show"); 
        isVisible = true; 
        ignite(); 
       }else{ 
        $(this).popover("hide"); 
        isVisible = false; 
       } 
       $(this).data('toggle', !toggle); 
      }); 
     /* 
     $(document).click(function(e) { 
      if(isVisible & clickedAway){ 
       $('[href="#share"]').popover('hide'); 
       isVisible = clickedAway = false 
      }else{ 
       clickedAway = true 
      } 
     }); 
     */ 

    } 



    return share; 

});

来源

2013-05-13 ThomasReggi

你有这种随时随地请的bootply或例子吗？我想要做类似的事情 – 2013-10-10 15:35:17

你需要调用：

addthis.toolbox('.addthis_toolbox');

你的元素追加到酥料饼后。这将触发AddThis以呈现按钮上的所有点击事件。我只是通过从开发工具控制台调用上述内容并使用所有按钮来测试它。

来源

2013-05-13 20:27:29 Sol

我迫不及待想尝试一下！非常感谢！ – ThomasReggi 2013-05-13 22:43:15

我解决了这个问题，在弹出窗口显示后加载AddThis按钮。请参阅下面的代码;

<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i> 
</button> 

<script language="JavaScript"> 
    $("[rel=popover]").popover({ 
    html: true 
    }); 

    $("[rel=popover]").on('shown.bs.popover', function() { 
    $('#pcontent').html("<div class='addthis_sharing_toolbox'></div>") 
    $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b") 
    }); 
</script>

来源

2015-11-28 10:25:37

在加载addthis脚本后向DOM添加addthis HTML

回答

相关问题