aqui está a execução do meu javascript:
ee_btn.addEventListener('click', () => {
//Ajax GET request to get data form and rendering it
RequestEEFormData(container, bounds).then(()=>{
// Loading a javascript file. it get loaded.
// I can call function from this file then.
loadScript('/static/js/locationConverterWidget.js');
});
});
function loadScript(url) {
const script = document.createElement('script');
script.src = url;
script.async=false;
script.onload = function(){
//trying to querySelector newly added content
console.log(document.querySelector('#id_item);
}
document.head.appendChild(script);
}
em caso:
async function RequestEEFormData(container, bounds) {
$.ajax({
type: 'GET',
url: 'someURL/',
success: function (response) {
container.innerHTML=response;
someFunction(bounds)
},
error: function(response){
console.log(response);
},
cache:false,
contentType: "application/json",
processData: false
});
}
o console.log retorna um Nodelist vazio.
Se eu chamar o mesmo consol.log de um botão 1 segundo depois, funciona.
Claramente há algo com o async que não entendo.
Alguém pode me explicar o que estou fazendo errado?
o objetivo é que eu queira que o arquivo javascript recém-baixado consulte o conteúdo recém-adicionado do querySelector, mas ele parece ser executado antes que o HTML seja completamente renderizado.
obrigado