动态生成的元素不触发事件侦听器

Question

伙计们遇到了一个应该很容易的问题，但似乎没有任何工作正常，我有一个简单的网站，我正在尝试注册一个表行的点击。内容是从 Javascript 动态生成的，并从 firebase 获取：                        var tableRow = document.createElement('tr');                    var tableData = document.createElement('td');                    tableData.addEventListener("click", draftRider(doc.data().name))                    tableData.innerHTML = "<p class='test'> click me </p>"                    tableRow.appendChild(tableData);                    document.getElementById("draftingStartBlock").appendChild(tableRow);我尝试过转义字符串、onclick 事件，现在添加事件侦听器。此外，当页面首次加载时，该函数似乎会触发。这是我想在单击时调用的函数：            function draftRider(riderName) {            showSnackBar(riderName)            if (playersTurn) {                var riderQuery = firebase.firestore().collection("leagues").doc(userLeagueId).collection("rider_list")                riderQuery.get().then(function (doc) {                    if (doc.exists) {                        var currentRiderName = doc.data().rider_name;                        var draftedBy = doc.data().drafted_by;                        if (riderName === currentRiderName && draftedBy === "") {                            database.collection("leagues")                                .doc(userLeagueId)                                .collection("rider_list")                                .doc(doc.id)                                .update("Drafted_By", userId)                            setNextPlayerAsPickingPlayer()                        }                    } else {                        // doc.data() will be undefined in this case                        console.log("No such document!");                    }                }).catch(function (error) {                    console.log("Error getting document:", error);                });            } else {                showSnackBar("Its currently not your turn");            }        }

Answer 1

您的代码中的这一行就是问题所在：

 tableData.addEventListener("click", draftRider(doc.data().name))

addEventListener是一个函数，它期望事件类型作为第一个参数，函数作为第二个参数。在您的情况下，您没有将函数作为第二个参数传递，您实际上是在调用该函数并将其返回的值（在本例中为未定义）作为第二个参数传递。这就是为什么您会看到页面加载时调用一次函数。

根据您帖子中的代码，您可以通过以下方式解决：

tableData.addEventListener("click", function() {
   draftRider(doc.data().name)})