Adding addthis HTML to the dom after loading addthis script-Collection of common programming errors
My goal is to have anchor tags where href="#share"
and turn them into twitter bootstrap popovers with the add this buttons in it. I have this working. Something that complicates this is that I add the html to the document and the clone that i’ve tried .clone(true)
but for some reason the events aren’t following.
Here’s the example: (click “share” button over image): http://reggi.myshopify.com/products/change-it-tee
The problem to be more specific is when you click the social icons nothing happens.
Here’s the gist of the below code. This is the require module I have that takes anything in the dom where href="#share"
and turns it into a popover with the add this buttons in it.
define(["jquery", "jquery-bootstrap", "addthis"], function($, jb, at){
var share = function(){
var html = ''+
''+
''+
''+
''+
''+
''+
''+
''+
'';
var template = ''+
''+
''+
'';
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;
});
-
You need to call:
addthis.toolbox('.addthis_toolbox');
after you append the element to the popover. That will trigger AddThis to render all the click events on the buttons. I just tested this by calling the above from the dev tools console and all the buttons worked.
Originally posted 2013-11-15 09:07:43.