将带有 Post 的 Click 事件侦听器动态添加到 Div 元素时递归过多答案

【问题标题】：Too Much Recursion When Dynamically Adding Click Event Listener With Post to a Div Element将带有 Post 的 Click 事件侦听器动态添加到 Div 元素时递归过多
【发布时间】：2023-03-07 17:51:01
【问题描述】：

我在将点击处理程序动态添加到具有给定类名的 div 标签（本例中为“reportLink”）时遇到“递归过多”错误，并且无法弄清楚问题是什么（范围问题？）。如果我 console.log div 的 innerText 代码可以正常工作，但是当我向它添加 ajax 帖子时会失败。有人在这里看到这个问题吗？感谢您的帮助！

(function () {
const links = document.querySelectorAll(".reportLink");
const userName = document.getElementById("userName");

for (let i = 0; i < links.length; i++) {
    let link = links[i];
    createEvent(link);
}

function createEvent(element) {
    var etext = element.innerText;

    element.addEventListener("click", function () {
        $.ajax({
            url: 'route/myroute',
            type: 'POST',
            data: { user: userName, reportName: etext },
            success: function (data) {
                //console.log(data);
            }
        });
    });
}

})();

【问题讨论】：

也许user: userName 应该是user: userName.value...虽然不确定
不知道是不是类似（成功块里没有你的函数代码...stackoverflow.com/questions/24640709/…
Guedes - 我不敢相信我做到了！将 userName 更改为 userName.value 后，它按预期发布。非常感谢！

标签： javascript jquery ajax recursion addeventlistener

【解决方案1】：

不妨试试这个语法：

$("body").on("click", ".reportLink", function(e) {
    // Use $(this) for the element and get your other data..

    $.ajax({
        url: 'route/myroute',
        type: 'POST',
        data: { user: userName, reportName: etext },
        success: function (data) {
             //console.log(data);
        }
    });
});

【讨论】：

我也在想同样的事情。 etext 应该是 e.target.innerText。
谢谢帕特里克！这缩短了我的代码并按预期工作！