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

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

您的代码中的这一行就是问题所在：&nbsp;tableData.addEventListener("click",&nbsp;draftRider(doc.data().name))addEventListener是一个函数，它期望事件类型作为第一个参数，函数作为第二个参数。在您的情况下，您没有将函数作为第二个参数传递，您实际上是在调用该函数并将其返回的值（在本例中为未定义）作为第二个参数传递。这就是为什么您会看到页面加载时调用一次函数。根据您帖子中的代码，您可以通过以下方式解决：tableData.addEventListener("click",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;draftRider(doc.data().name)})