Can't add onclick listener to dynamically created element

Question

I'm trying to implement a searchbar to search adresses and show the selected place on a map. When I type in the searchbar the results are showing in a dropdown, now I want to edit my map and other stuff when I click on a result.

But I can't manage to add a listener to the elements (which are dynamically created when I got the results of the search), no matter what I try (addEventListener, JQuery, href) when I inspect the elements on my browser no listener is attached to any of them.

Here is my html :

<div class="container p-3 text-center text-md-left clearfix">
    <h1>Smart-bornes</h1>
    <p>Je localise les smart-bornes les plus proches</p>
    <div class="input-group dropdown mx-auto w-75 float-md-left">
        <input id="localisation_barreRecherche" class="form-control" type="text" placeholder="Rechercher un lieu"/>
        <button id="localisation_boutonRecherche" class="btn btn-light">Rechercher</button>
        <div id="localisation_dropdownRecherche" class="dropdown-menu w-100"></div>
    </div>
</div>

<div class="container p-3">
    <div id="map"></div>
</div>

And my JS:

function initBarreRecherche(){
    let barreRecherche = document.getElementById('localisation_barreRecherche');
    let boutonRecherche = document.getElementById('localisation_boutonRecherche');
    let dropdownResultats = document.getElementById('localisation_dropdownRecherche');

    barreRecherche.onkeyup = function (event) {
        console.log('onkeyup');
        if(event.key === 'Enter'){

        }else if(event.key === 'keydown'){

        }else if(barreRecherche.value !== '') {
            rechercheAdr(barreRecherche.value);
            $(dropdownResultats).show();
        }else{
            $(dropdownResultats).hide();
        }
    };

    boutonRecherche.onclick = function () {

    }
}

function rechercheAdr(entree){
    console.log('recherche');
    return new Promise((resolve, reject) => {
        fetch(rechercheURL + entree)
            .then(resp => {
                return resp.text();
            })
            .then(adressesJSON => {
                let adresses = JSON.parse(adressesJSON);
                let dropdownResultats = document.getElementById('localisation_dropdownRecherche');
                //dropdownResultats.style.width = '100%';
                dropdownResultats.style.zIndex = '10000';
                let resultats = document.createElement('ul');
                resultats.className = 'list-group';
                if(adresses.length > 0){
                    for(let [key, adr] of Object.entries(adresses)){
                        let result = document.createElement('li');
                        result.className = 'list-group-item list-group-item-action';
                        result.href = 'javascript : resultOnClick(adr)';
                        result.style.paddingLeft = '5px';
                        result.style.paddingRight = '5px';
                        result.style.cursor = 'pointer';
                        //result.style.overflow = 'hidden';
                        result.innerText = adr.display_name;
                        result.addEventListener('click', () => console.log('onclick'));
                        resultats.appendChild(result);
                    }
                }else{
                    console.log('aucun résultat');
                    let msgAucunResultat = document.createElement('li');
                    msgAucunResultat.style.paddingLeft = '5px';
                    msgAucunResultat.style.paddingRight = '5px';
                    msgAucunResultat.innerText = 'Aucun résultat';
                    resultats.appendChild(msgAucunResultat);
                }
                dropdownResultats.innerHTML = resultats.innerHTML;

                console.log(adresses)
            })
    })
}

Answer 1

manually call initBarreRecherche() at the end of response.

.then(adressesJSON => {
    ///....
    this.initBarreRecherche()
})

Answer 2

You are using jquery so instead of all 'onClick' syntax, or addEventListener, you can attach click handler like:

$(dropdownResultats).on('click', 'li', event => {
  alert('some li clicked')
})