Mixpanel track_links не работает с динамически добавленными элементами

Question

У меня возникли проблемы с использованием mixpanel.track_links со ссылками, добавленными динамически (после загрузки страницы).

Для общего примера, учитывая эту страницу:

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

В каких-то действиях пользователя, ссылки добавляются на страницу с помощью JQuery. Например:

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

Проблема заключается в том, что track_links не запускается при щелчке только что созданной ссылки. Я надеюсь, что кто-то может поделиться своим опытом в том, чтобы включить функцию track_link для динамически добавленных ссылок.

Answer 1

Мне было любопытно, поэтому я проверил их код и пошел вперед и сделал, как они и предложили. Я тестировал его, и он работал нормально. Это требует jQuery.

Пример использования: 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); 
    }); 
};