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

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

我尝试了转义的字符串，在事件上单击并添加事件侦听器。同样，在首次加载页面时，该功能也会触发。

这是我要在单击时调用的功能：

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