Mixpanel track_links funktioniert nicht mit dynamisch hinzugefügten Elementen

Question

Ich habe Probleme mit der Verwendung von mixpanel.track_links mit dynamisch hinzugefügten Links (nach dem Laden der Seite).

Für ein allgemeines Beispiel dieser Seite gegeben:

<div id="link-div"></div> 
<input type="button" id="add-link" /> 
<script type="text/javascript"> 
mixpanel.track_links(".mixpanel-event", "event name", function(ele) { return { "type": $(ele).attr("type")}}); 
</script> 

Irgendbenutzeraktion werden Links zu der Seite hinzugefügt jquery verwenden. Zum Beispiel:

$('#add-link).click(function() { 
    $('#link-div').html('<a class="mixpanel-event" type="event-type" href="#>Link to track</a>'); 
}) 

Das Problem ist, dass track_links nicht beim Klicken auf den neu erstellten Link ausgelöst wird. Ich hoffe, dass jemand seine Erfahrung teilen kann, indem er ermöglicht, dass die Funktion track_link für dynamisch hinzugefügte Links funktioniert.

Answer 1

Ich war neugierig, also überprüfte ich ihren Code und ging voran und tat, was sie vorschlugen. Ich habe es getestet und es hat gut funktioniert. Dies erfordert jedoch jQuery.

Beispiel Nutzung: mixpanel.delegate_links(document.body, 'a', 'clicked link');

// with jQuery and mixpanel 
mixpanel.delegate_links = function (parent, selector, event_name, properties) { 
    properties = properties || {}; 
    parent = parent || document.body; 
    parent = $(parent); 

    parent.on('click', selector, function (event) { 
     var new_tab = event.which === 2 || event.metaKey || event.target.target === '_blank'; 

     properties.url = event.target.href; 

     function callback() { 
      if (new_tab) { 
       return; 
      } 

      window.location = properties.url; 
     } 

     if (!new_tab) { 
      event.preventDefault(); 
      setTimeout(callback, 300); 
     } 

     mixpanel.track(event_name, properties, callback); 
    }); 
};