2013-06-24 63 views
4

我在一個想要追蹤分析的頁面上有多個按鈕(tweet,share ...)。我想知道按鈕A是否優於按鈕B :)多JS創建twitter按鈕:跟蹤哪一個被點擊?

這些按鈕是按需加載的:在某些div上或在一段時間後懸停。我出於性能方面的考慮。我不希望每次都解析整個DOM。

我使用twitter小部件庫中的twttr.widgets.createXXX函數,如此處所述:https://dev.twitter.com/docs/intents/events

一切正常,直到那。

但是,當我綁定指定事件的回調函數時,提供的回調數據是空的或幾乎是空的。我有按鈕類型,但我沒有關於事件和原始目標的任何其他信息。

我查看了window.twttr對象的內部,以瞭解與最後一個事件相關的信息或者創建的不同iframe。

這裏是我提出來解釋問題的jsfiddle: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> 

謝謝您的幫助!

回答