insertAdjacentHTML не хочет отрисовывать элемент

нужна помощь уважаемого сообщества, а то я уже совсем голову сломал, не могу понять... есть код:

import {data} from './data.js'
let currInd = 0
let itemsPerPage = 3
const moreBtn = document.querySelector('.btn_more')
// const back = document.querySelector('.back')
const body = document.querySelector('body')
console.log('selectors initialized');

function loadItems() {
  console.log('loading items..');
  const part = data.slice(currInd, currInd + itemsPerPage)
  let block = ``
  for (let index = 0; index < part.length; index++) {
    block += `
    <div class="item">
      <img class="portfolio_img" src="${part[index].image}" alt="Caffee_preview">
      <h3><a href="${part[index].url}">${part[index]['site-name']}</a></h3>
    </div>`
  }
  document.querySelector('.container').innerHTML += block
  currInd += itemsPerPage
  console.log('items loaded');

  const container = document.querySelector('.container')
  const items = container.querySelectorAll('.portfolio_img')
  items.forEach(item => {
    item.addEventListener('click', (event) => {
      console.log('item clicked');
      const str = event.target.src
      // console.log(str.slice(str.indexOf('a')));
      findItems(str.slice(str.indexOf('a')));
      body.classList.add('no-scroll')
    })
  })

  if (currInd >= data.length){
    moreBtn.style.display = 'none'
  }
}
moreBtn.addEventListener('click', loadItems)
loadItems()

function findItems(targ) {
  console.log('finding items');
  for (let i = 0; i < data.length; i++) {
    if (targ === data[i].image) {
      let item = data[i];
      body.insertAdjacentHTML("afterbegin", `
      <div class="pop-up">
        <h2 class="pop-up__site-name">${item['site-name']}</h2>
        <p class="pop-up__description">${item['description']}</p>
        <a class="pop-up__url" href="${item['url']}">${item['title']}</a>
        <div class="pop-up__image-container">
          <img class="pop-up__img" src="${item['layout']}" alt="">
        </div>
        <div class="back">back to main</div>
      </div>
      `);
      console.log('pop-up created');
      document.querySelector('.back').addEventListener('click', () => {
        document.querySelector('.pop-up').remove();
        body.classList.remove('no-scroll')
      })
      break
    }
  }
}

конкретная проблема с функцией findItems
функция должна отрисовать модальное окно при клике на ранее отрисованные картинки, но...
в моем локальном репо, в vs code страница запущенная через life server, все выполняет правильно и все показывает но стоит мне отправить коммит на гитхаб и пройти по ссылке как... модальное окно не открывается и хоть ты тресни... сперва я даже подумал, что дело в гит хабе и завел тему
но в этой теме коллега insolor убeдительно показал, что дело не в гитхаб... с такой же проблемой я сталкиваюсь, если хочу просмотреть страницу используя HTML Preview - он ведет себя так же как и гитхаб...


Ответы (0 шт):