Mixpanel track_links does not work with dynamically added elements

Question

I'm having trouble using mixpanel.track_links with links added dynamically (after page load).

For a general example, given this page:

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

At some user action, links are added to the page using jquery. For example:

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

The problem is that track_links isn't triggered on click of the newly created link. I'm hoping someone can share their experience in enabling the track_link function to work for dynamically added links.

Answer 1

I was curious so I checked out their code and went ahead and did as they suggested. I tested it, and it worked fine. This requires jQuery though.

Example usage: 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);
    });
};