Javascript Mixpanel track_链接不适用于动态添加的元素

我在使用mixpanel.track\u链接时遇到问题，动态添加了链接（页面加载后）

对于一般示例，请参见本页：

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

track_链接（“.mixpanel事件”，“事件名称”，函数（ele）{return{“type”：$（ele.attr（“type”）}）；

在某些用户操作中，使用jquery将链接添加到页面中。例如：

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

$（'#添加链接）。单击（函数（）{
$（'#link div'）.html（''）；
})

---

问题是，单击新创建的链接时不会触发track_链接。我希望有人能分享他们的经验，让track_link功能能够为动态添加的链接工作。

我很好奇，所以我检查了他们的代码，并按照他们的建议进行了操作。我测试了一下，效果很好。但这需要jQuery

用法示例：

mixpanel.delegate_链接（document.body，'a'，'clicked link'）

在react上，我很难让跟踪链接按预期工作。我注意到的主要警告是，重复的事件可能会以突发方式发送到mixpanel。
我使用了一个稍微修改过的@Kyle版本来解决我的问题。此外，这说明
properties
可能是mixpanel API支持的函数

//mixpanelSetup.js
从“md5”导入md5；
常量设置=（）=>{
init（令牌）；
//集合确保项目的唯一性
mixpanel.delegated_links=新集合（）；
mixpanel.delegate_links=（父级、选择器、事件名称、事件属性，{ignoreUrl=false}）=>{
//通过用例认为“唯一”的任何事物（例如md5（`${selector}\uuU${eventName}`）进行散列
const linkHash=md5（选择器）；
parent=parent | | document.body；
父项=$（父项）；
//不要为已跟踪的事件添加其他跟踪器。
if（mixpanel.delegated_links.has（linkHash））{
返回；
}
mixpanel.delegated_links.add（linkHash）；
在（“单击”，选择器，（事件）=>{
const newTab=event.which==2 | | | event.metaKey | | | event.target.target====“_blank”；
if（eventProperties的类型==“函数”）{
eventProperties=eventProperties（event.target）|{}；
}
eventProperties.url=event.target.href；
//以防我们不需要属性上的url。
如果（忽略URL）{
删除eventProperties.url；
}
常量回调=（）=>{
if（newTab）{
返回；
}
window.location=event.target.href；
};
如果（！newTab）{
event.preventDefault（）；
setTimeout（回调，300）；
}
调试（“跟踪链接点击！”）；
track（eventName、eventProperties、回调）；
});
};
}

并可用作：

//MyComponent.jsx
从“React”导入React，{useffect}；
从“@reach/router”导入{Link，useLocation}；
常量MyComponent=（{moduleName，key，…props}）=>{
const id=`#${id}`{moduleName}`；
useffect（（）=>{
mixpanel.delegate_链接（document.parent，id，event=>{
返回{
模块：event.id.split（“\u”）.pop（），
…道具。其他道具跟踪
};
})
}, [])
返回
我的页面
}
Mixpanel支持团队确认track\u链接不能与动态生成的链接一起使用。他们建议通过反向工程跟踪链接和跟踪表单来重建功能。“Track_链接和Track_表单是单击处理程序；它们的基本结构是禁用页面更改，发送Track请求，然后在Track函数的回调上更改页面。还有一个超时（300ms）无论如何都要重新加载页面，这样在Mixpanel出现中断的罕见事件中，即使我们的服务器关闭，链接仍然可以工作。“你说的反向工程track_链接是什么意思？不过有一个小问题。如果是
，它们现在有类似的代码。您在哪里添加此方法？在mixpanel库中？您可以将其放入代码段后的任何脚本中。
// 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);
    });
};