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 that you have read and understand our privacy policy and code of conduct.

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