1

Доброго времени суток. Проблема такая: при подгрузке с помощью 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(

7
  • не делайте так. Подключайте сразу все скрипты. Не надо грузить их по ajax 30 июл 2017 в 8:00
  • Как подключить скрипт, в котором есть слушатель события, который реагирует на элемент, которого еще нету на страницы?
    – Jodest
    30 июл 2017 в 8:23
  • Отредакируйте основной вопрос, добавив туда этот. Тогда я смогу дать вам нормальный ответ по теме 30 июл 2017 в 8:26
  • В топик добавил вопрос, или в название топика надо?
    – Jodest
    30 июл 2017 в 8:28
  • Дайте минут 5-10 30 июл 2017 в 8:31

1 ответ 1

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();
<div id='container'></div>

Но это костыль все-таки. Красивый вариант - модули и webpack, но пугать ими Вас явно рано

1
  • Спасибо! Буду пробовать) Webpack у меня наверно через месяц в обучении будет вместе с react'ом. А для себя уже давно хотел webpack попробовать как замена gulp для сборки проектов.
    – Jodest
    30 июл 2017 в 8:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.