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

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