» Poradna » Programy

Jak v JS ošetřit neexistující hlídané elementy

 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

Ahoj, jde ošetřit nějak tento kód? Těch seznamů je na stránce několik desítek ale generují se a odstraňují se postupně. JS kód načítám celý při spuštění stránky a to způsobuje chyby. Díky<ul id="menu"><li>...</li><li>...</li><li>...</li></ul>document.getElementById('menu').onclick = function(){console.log('kliknuto');} ;

Odpovědi na otázku

 |   |  Microsoft Windows 10 Firefox 72.0

Naprosto nejlepším řešením by bylo v kódu, který umisťuje seznamy do DOMu k těm seznamům přidávat EventListener.Např.var el = document.createElement("ul");el.addEventListener("click", listClick);a jinde v kódu pak definici funkcefunction listClick(){ console.log('kliknuto');}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

Děkuji za vyřešení. Pokud ten element existuje tak ten zápis bude existovat takto?var el = document.getElementById("menu");el.addEventListener("click", listClick);function listClick(){console.log('kliknuto');}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Linux Firefox 72.0

Ano.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

Děkuji, ještě jsem narazil na problém, že pokud nechám jen id toho ulvar ul = document.getElementById("menu");tak to reaguje na kliknutí mimo li elementy.Zkusil jsem to upřesnit taktovar ul = document.querySelector("#menu > li");ale nemůžu dostat id položky liv prvním případě jsem získal to id taktoevent . target . idpo upřesnění to nefunguje.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

querySelector nevrací jeden element ale jejich pole.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

querySelector() vrací první shodný element. Pole elementů vrací querySelectorAll()

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

Pravda, moje chyba.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Linux Firefox 72.0

querySelector() vrací jen první nalezený prvek. Výsledkem pak je, že se EventListener připojí pouze k prvnímu li tagu a ostatní nebudou reagovat.Správně je použít:var polozky = document.querySelectorAll("#menu > li");for(polozka of polozky) polozka.addEventListener("click", listClick);ID li tagu by mělo jít stále přes targetfunction listClick(event){ console.log(event.target.id);}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

Díky moc.Škoda jen, že nejde použít více elementůvar polozky = document.querySelectorAll("#menu > li , #menu2 > li , #menu3 > li");for ( var polozka of polozky){polozka.addEventListener("click", listClick);}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

Ale jde. Normálně to funguje.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

No funguje ale jen částečně, nezískám z takového zápisu id rodičů.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

To mi připadá spíš jako nevhodná konstrukce jiné části kódu.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

console.log(event.target.parentElement.id);

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 79.0.3945.117

document.querySelectorAll('ul[id*="menu"] > li')

Souhlasím  |  Nesouhlasím  |  Odpovědět


Určitě si přečtěte

Proč teď nedává smysl kupovat notebook a kdy přijde ten správný čas

Proč teď nedává smysl kupovat notebook a kdy přijde ten správný čas

** Během pár týdnů přijdou na trh výkonnější notebooky ** Čím dražší notebook vybíráte, tím víc se vám změní nabídka ** Také lehké notebooky budou téměř herní

Tomáš Holčík | 52

Výkon herního počítače za 139 Kč nebo i úplně zadarmo. Geforce Now startuje!

Výkon herního počítače za 139 Kč nebo i úplně zadarmo. Geforce Now startuje!

** Dlouhý betatest končí a nyní všichni mohou hrát přes internet ** Nemusíte žádné hry kupovat znovu. Jede to, co už máte v knihovnách na Steamu, Uplay, Battle.net a jinde ** Roční náklady odpovídají ceně jedné běžné hry

Tomáš Holčík | 53



Aktuální číslo časopisu Computer

Velký test autokamer

Test ATX skříní

Jak surfovat pohodlně

Sportovní aplikace

Jak funguje procesor