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;

});

1. 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.