Работа скрипта в подгружаемом файле с помощью ajax

348

31 июля 2017, 15:01

Доброго времени суток. Проблема такая: при подгрузке с помощью ajax html файла и добавления его содержимого в разметку основного, скрипт который содержится в этом подгружаемом файле не работает. Файлы:

index.html
main.css
main.js
cartform.html
cartform.js
successfully.html

В main.js прописан скрип для подгрузки файла cartform.html, в котором подключается файл cartform.js. В cartform.js прописан скрип для пордгрузки файла successfully.html.

Ajax в main.js и cartform.js примерно одинаковый:

function successfully() { 
  const xhr = new XMLHttpRequest; 
  xhr.onreadystatechange = function() { 
    if ( xhr.readyState !== XMLHttpRequest.DONE ) { 
      return; 
    } 
    document.getElementsByClassName('hamburger')[0].innerHTML += xhr.response; 
  } 
  xhr.open( 'GET', 'successfully.html'); 
  xhr.send(); 
};

Полный код тут: https://jodest.github.io/Karev_Dmitriy_JS2/3/LuckyBurger/ https://github.com/Jodest/jodest.github.io/tree/master/Karev_Dmitriy_JS2/3/LuckyBurger

Можно как то решить проблему без применения jquery? Или как подключить скрипт, в котором есть слушатель события, который реагирует на элемент, которого еще нету на страницы?

P.s. строго не судите, я новичок в js(

Answer 1

Вариант отложенного запуска скрипта:

function emulate_ajax() { 
  var c = document.getElementById('container'); 
  c.innerHTML = "<p class='text'>123</p>"; 
  c.dispatchEvent(new Event('updated')); 
}; 
 
document.getElementById('container').addEventListener('updated', function() { 
  console.log(document.querySelector('p.text')); 
}); 
 
emulate_ajax();