動態生成的元素不觸發事件監聽器

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