Кнопка шаблона не работает с Javascript - PullRequest
Новая
       7

Кнопка шаблона не работает с Javascript

0 голосов
/ 25 февраля 2019

Я пытался назначить кнопку для моего HTML-шаблона, который загружает модал с некоторым дополнительным описанием - по какой-то причине я не могу заставить кнопку, изменяющую css display:none, работать вообщес тех пор, как он загружал контент динамически.

Консоль сообщает btn is null, но я пробовал window.onload и DOMContentLoaded безрезультатно.Это связано с динамической загрузкой, и мне, возможно, нужно назначить идентификаторы для отдельной кнопки?

Кодовый код здесь для длинного кода

Любая помощь будет в значительной степениоценены.

1 Ответ

0 голосов
/ 25 февраля 2019

Хорошо, я думаю, что решил вашу проблему.Честно говоря, вы действительно не должны представлять свой вопрос / код как этот, его действительно трудно понять и устранить неисправности (читай this ).

В любом случае ... Несколько проблем:

  • Вы клонируете элементы, и поэтому все элементы будут иметь общие атрибуты (идентификатор, имя и т. Д.).Это важно, потому что у каждого из них есть свой модальный блок.
  • Вы пытаетесь получить доступ к элементам (обработчикам событий добавления) до того, как такие элементы были созданы.Таким образом, ваши слушатели событий должны быть созданы, когда вы клонируете каждый элемент.
  • Ваше модальное окно было инициализировано с "display: block", но вы комментируете, что вы хотите, чтобы оно было скрыто в начале.

Я изменил ваш код, поэтому каждый элемент создает новый идентификатор (также каждый модальный блок) и добавляет к нему прослушиватель событий.

Наиболее важные изменения: 

clone.querySelector(".wineWrapper", "#myBtn").id+=count;
clone.querySelector(".wineWrapper", "#myBtn"+count).onclick=  function(e) {     
     this.nextElementSibling.style.display = "block";
}
clone.querySelector(".close").onclick=function(){
  this.parentNode.parentNode.style.display = "none";
}

Codepen

Примечание: Я уничтожил ваш оконный слушатель (я подумал, что это может быть причиной вашей проблемы, изначально), поэтомуесли вам это нужно, прокомментируйте ответ, и я внесу изменения.

...