在Chrome扩展程序中动态呈现内联函数

Question

In my chrome extension, I am dynamically rendering some items in an object and tried to put an inline function that gets tied to a single item.

chrome.storage.sync.get(['player_info'], (data) => {
    console.log('search')
    console.log(data)
    // data = list of possible players 
    let player_arr = data.player_info
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById("card-wrapper").innerHTML +=
            `<div onclick="alert('clicked')" class="player_option">
                <center>
                    <div class="card-img-small">
                        <a href="#">
                            <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                        </a>
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        ${player_arr[i].name}
                    </div>`
    }
})

In the div wrapper, I added an alert function to check if it works, but nothing happens. I inspected the element, and it looked like this:

<div onclick="alert('clicked')" class="player_option">
                <center>
                    <div class="card-img-small">
                        <a href="#">
                            <img id="player_img" src="https://fmdataba.com/images/p/4348.png" class="img-responsive">
                        </a>
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        Paul Pogba
                    </div></div></div>

It seems like this is now allowed in Chrome Extension. What is a way to solve this without violating the security policy?

EDIT - using addEventListener

let player_arr = data.player_info
for (let i = 0; i < player_arr.length; i++) {
    document.getElementById("card-wrapper").innerHTML +=
        `<div id="selected_player_${i}" class="player_option">
            <center>
                <div class="card-img-small">
                    <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                </div>
            </center>
            <div class="card-body">
                <div id="player-name" class="price-small">
                    ${player_arr[i].name}
                </div>`

    document.getElementById(`selected_player_${i}`).addEventListener("click", function() {
        alert(`${player_arr[i].name}`)
    })
}

Answer 1

I solved the issue by making another for-loop for the addEventListener() . If I put both HTML rendering and the addEventListener in a single for-loop as I did in my question, the addEventListener gets applied only to the last item.

const callname = (name) => {
    alert(name)
}

chrome.storage.sync.get(['player_info'], (data) => {
    console.log('search')
    console.log(data)
    // data = list of possible players
    let player_arr = data.player_info
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById("card-wrapper").innerHTML +=
            `<div id="selected_player_${i}" class="player_option">
                <center>
                    <div class="card-img-small">
                        <img id=\"player_img\" src="${player_arr[i].profile_img}" class="img-responsive">
                    </div>
                </center>
                <div class="card-body">
                    <div id="player-name" class="price-small">
                        ${player_arr[i].name}
                    </div>`
    }
    for (let i = 0; i < player_arr.length; i++) {
        document.getElementById(`selected_player_${i}`).addEventListener("click", function() {
            callname(`${player_arr[i].name}`)
        })
    }
})