Manipulation DOM après requête AJAX

Bonjour à tous je vais essayer d'être le plus clair et précis :
Je travaille sur une web app en Symfony 4 et VanillaJS côté Front, je n'ai pas le droit à Jquery.

J'effectue plusieurs requêtes AJAX afin de ne pas rafraichir la page :

var xhr = new XMLHttpRequest();
xhr.open("GET", "path/to/api" + '?value=' + oJson, true);
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.onreadystatechange = function () {
  if (xhr.readyState != 4 || xhr.status != 200) return;
            var data = JSON.parse(xhr.responseText);
            let template = data['_template'];
            let searchContent = document.getElementById('result');
            searchContent.innerHTML = template;
};
xhr.send(null);

Ce code présent dans le success fonctionne grâce à Symfony et me renvoit un template html, je l'injecte alors dans une "div id="result"></div> présente au chargement.

Dans ce template il ya des éléments et des boutons par exemple :

<button id="backtosearch" class="btn btn-info" type="button">

Back to search</button>

Mais si j'essai de manipuler le DOM de ce template à la suite de ma fonction AJAX, vu qu'au chargement du script JS le template n'est pas dans le DOM, voici l'erreur : Cannot read property 'addEventListener' of null

document.getElementById("backtosearch").addEventListener('click', backToSearch);

Toute manipulation de ce qui se trouve dans le template chargé ne fonctionnera pas..

C'est hyper embêtant car toute ma web app fonctionnera via des requêtes AJAX ( je dois trouver un système (Peut-être des Promises() ? ) Pour rendre générique et fonctionnel tout cela.. ( Je n'ai pas le droit à un framework JS ).

Un grand Merci d'avance !

C'était donc si simple que ça.. merci beaucoup JENCAL
Modifié par Slimshady (26 Apr 2019 - 13:23)