I have several buttons (tweet, share ...) on the page that I need to track for analytics. I want to know if button A is better than button B :)
Buttons are loaded "on demand": when you hover over specific divs or after a while. I do this for performance reasons. I do not want the entire DOM to be processed every time.
I am using the twttr.widgets.createXXX functions from the Twitter widget library as described here: https://dev.twitter.com/docs/intents/events .
Everything works well before that.
But when I bind the callback functions on the specified events, the callback data is empty or almost empty. I have a button type, but I have no other information about the event and the original purpose.
I looked inside the window.twttr object for information on the latest event or iframes created by the differences.
Here is the jsfiddle I did to explain the problem: http://jsfiddle.net/3fFFf/
<div id="btnContainer1" class="btn not-activated">Button container 1</div> <div id="btnContainer2" class="btn not-activated">Button container 2</div> <script> // Loading the twitter library twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs")); twttr.ready(function(twttr) { // I only want to load the tweet button when the divs are hovered $(document).on("mouseenter", ".btn.not-activated", function(e){ var $div = $(this); $div.removeClass("not-activated").text(""); twttr.widgets.createShareButton( "http://twitter.com", $div[0], function(el) {}, // loaded callback { // Options lang: "en", text: "hey, share this great site !", via: "me", count: "none" }); }) // A click occured on a twitter button twttr.events.bind('click', function(e){ alert("e.target should by a node or something, but is : "+e.target) }); }); </script>
Thank you for your help!