0

Alguém sabe porque quando você cria um componente HTML usando o Template literals ele retorna sempre null? ex: criei uma lista e quero pegar as li pra colocar um evento, mas sempre me retorna null, sendo que ela existe no DOM.

const $container = doc.querySelector('[data-js="container"]');
const $categorie = doc.querySelectorAll('[data-js="categorie"] li');

 const markup = `
    <ul data-js='categorie'>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
 `;

 $container.innerHTML = markup;
1
  • Obs: A lista se torna um nodeList e daria pra transformar em array like com a feature do es6 o Array.from() sem problemas, mas a zica é que o elemento criado pelo template literals não existe no DOM. 13/10/2017 às 2:22

1 Resposta 1

0

O seu problema está na ordem da execução, você deve executar a busca pelos elementos, após eles serem criados no DOM, coloque essa linha:

const $categorie = doc.querySelectorAll('[data-js="categorie"] li');

Abaixo desta:

$container.innerHTML = markup;

Exemplo

const doc = document;
const $container = doc.querySelector('[data-js="container"]');

const markup = `
    <ul data-js='categorie'>
      <li>item 01</li>
      <li>item 02</li>
      <li>item 03</li>
    </ul>
`;

$container.innerHTML = markup;

const $categorie = doc.querySelectorAll('[data-js="categorie"] li');

Array.from($categorie).forEach(item => {
    item.addEventListener('click', function(event) {
        alert("Você clicou em: " + this.innerText);
    });
});
<div data-js="container"></div>

2
  • Wellingthon, Obrigado! era isso mesmo, valeu mesmo, perdi o dia nisso ontem.. Valeu!!! 13/10/2017 às 12:51
  • Se possível marque como certa ou útil.
    – NoobSaibot
    13/10/2017 às 17:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .