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

Question

guys are am having an issue that should be easy but it doesn't seem like anything is working, I have a simple site that I am trying to register an on click for a table row with. The content is dynamically generated from Javascript and gets it from 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);

I have tried an escaped string, onclick on event and now add event listener. Also when the page first load the function appears to fire.

Here is the function I want to call on click :

            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

This line in your code is the issue:

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

addEventListener is a function that expects an event type as the first argument and a function as the second. In your case, you aren't passing the function as the second argument, you are actually calling the function and passing the value it returns (undefined in this case) as the second argument. Which is why you are seeing your function called once when the page loads.

Based on the code in your post, you could solve it with:

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