{"id":1382,"date":"2022-08-30T15:16:04","date_gmt":"2022-08-30T15:16:04","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/adding-addthis-html-to-the-dom-after-loading-addthis-script-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:04","modified_gmt":"2022-08-30T15:16:04","slug":"adding-addthis-html-to-the-dom-after-loading-addthis-script-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/adding-addthis-html-to-the-dom-after-loading-addthis-script-collection-of-common-programming-errors\/","title":{"rendered":"Adding addthis HTML to the dom after loading addthis script-Collection of common programming errors"},"content":{"rendered":"

My goal is to have anchor tags where href=\"#share\"<\/code> 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)<\/code> but for some reason the events aren’t following.<\/p>\n

Here’s the example: (click “share” button over image): http:\/\/reggi.myshopify.com\/products\/change-it-tee<\/p>\n

\n

The problem<\/strong> to be more specific is when you click the social icons nothing happens.<\/p>\n<\/blockquote>\n

Here’s the gist of the below code. This is the require module I have that takes anything in the dom where href=\"#share\"<\/code> and turns it into a popover with the add this buttons in it.<\/p>\n

define([\"jquery\", \"jquery-bootstrap\", \"addthis\"], function($, jb, at){\n\n    var share = function(){\n\n        var html = ''+\n            ''+\n            ''+\n            ''+\n            ''+\n            ''+\n            ''+\n            ''+\n            ''+\n            '';\n\n        var template = ''+\n            ''+\n            ''+\n            '';\n\n        var isVisible = false;\n        var clickedAway = true;\n\n        $(\"body\").append(html);\n\n        var ignite = function(){\n            var script = document.createElement( 'script' );\n            script.type = 'text\/javascript';\n            script.src = 'http:\/\/s7.addthis.com\/js\/300\/addthis_widget.js#pubid=holstee';\n            $(\"head\").append(script);\n            console.log(\"ignition\");\n        };\n\n        $('[href=\"#share\"]')\n            .show()\n            .popover({\n                content: function(){\n                    return $(\".addthis_toolbox\").clone().removeClass(\"hide\");\n                },\n                html: true, \n                placement: \"top\",\n                template: template,\n                trigger: \"manual\"\n            }).click(function(event){\n                event.preventDefault();\n                var toggle = ($(this).data('toggle') == undefined) ? true : $(this).data('toggle');\n                clickedAway = false;\n                if(toggle){\n                    $(this).popover(\"show\");\n                    isVisible = true;\n                    ignite();\n                }else{\n                    $(this).popover(\"hide\");\n                    isVisible = false;\n                }\n                $(this).data('toggle', !toggle);\n            });\n        \/*\n        $(document).click(function(e) {\n            if(isVisible & clickedAway){\n                $('[href=\"#share\"]').popover('hide');\n                isVisible = clickedAway = false\n            }else{\n                clickedAway = true\n            }\n        });\n        *\/\n\n    }\n\n\n\n    return share;\n\n});\n<\/code><\/pre>\n
    \n
  1. \n
    You need to call:<\/p>\n
    addthis.toolbox('.addthis_toolbox');\n<\/code><\/pre>\n
    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.<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-15 09:07:43. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1382","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1382"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1382\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}