Priradenie eventu pre konkretny div

13. 5. 2014 22:38:28

Potreboval by som pre kazdy div priradit urcitu cinnost. Mam 200 divov na stranke a po kliknuti na konkretny div by som chcel vykonat cinnost... kazdy div ma id v tvare mima + cislo (od 1 do 200)

Berie mi vsak po kliknuti na objekt len posledne cislo. Myslel som, ze takymto zapisom priradim pre kazdy div konkretnu pracu s danym divom, ale vsetko sa priraduje len na posledne cislo. Kde robim chybu? Dakujem za pripomienky.

for(var i = 1; i <= 200; i++) {
var divicek = "mima" + i;
document.getElementById(divicek).onclick = function() {
alert(divicek);
};

13. 5. 2014 22:38:28

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023013

flashnr

(2 hodnocení)

13. 5. 2014 23:10:31

Ja by som to spravil cez jquery, asi takto:

13. 5. 2014 23:10:31

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023012

Malcánek Jan

(4 hodnocení)

13. 5. 2014 23:54:43

Podle mě bude špatně ten cyklus, takto to fungovat nebude, proto se ti to přiřadí až na ten poslední...

Jinak taky by jsem to udělal přes jQuery, ale asi to budeš muset psát ručně pro každý div... stejně chceš na každý div unikátní akci, ne?

Jinak viděl bych to takto:

13. 5. 2014 23:54:43

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023011

flashnr

(2 hodnocení)

14. 5. 2014 00:03:15

Hm, 200 divov a na kazdy pisat click, tak to vela stastia :) . Co je zle na mojom rieseni? div predsa identifikuje cez attr('id'), takze moze spustit akciu na konkretny div.

14. 5. 2014 00:03:15

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023010

Malcánek Jan

(4 hodnocení)

14. 5. 2014 00:07:20

Španého na tom není nic snad až na chybějící středníky, ale pokud chce autor unikátní akci pro každý div, tak stejně bude psát 200 akcí, pokud jsem ho dobře pochopil, takže si to stejně neulehčí :D

14. 5. 2014 00:07:20

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023009

flashnr

(2 hodnocení)

14. 5. 2014 00:14:43

No neviem si predstavit realne pouzitie 200 unikatnych akcii. A keby aj, stale sa da pouzit switch a mat len jeden trigger.

14. 5. 2014 00:14:43

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023008

Martin Schlemmer

(36 hodnocení)

14. 5. 2014 00:35:01

1. Ve chvíli, kdy událost proběhne, proměnná, kterou vypisujete, má hodnotu posledního kroku cyklu.

Pokud chcete použít hodnotu, která je platná v době přiřazení události, musíte ji zmrazit v čase předáním do funkce (neboli closure).

Viz jednoduchá úprava

Edit fiddle - JSFiddle

2. Nepřiřazujte události atributům "onclick" apod. Přiřaďte je elementu pomocí metody addEventListener()

Jeden prvek pak může mít víc události jednoho typu.

2,5. Pokud budete pro přiřazení používat jQuery, nepoužívejte metodu click() a podobné, ale on(). on() má několik výhod, například funguje i na dynamicky generované prvky, přidané až po přiřazení události.

jquery - Difference between .on('click') vs .click() - Stack Overflow

3. Z výkonnostního hlediska je lepší naslouchat události na nadřazeném prvku než na několika stech dětech. Pomocí event.originalTarget získáte nejnižší prvek, který událost vyvolal.

Naznačil jsem to tu:

Edit fiddle - JSFiddle

14. 5. 2014 00:35:01

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023007

t-pack25

14. 5. 2014 00:41:22

Martin Schlemmer

Nevidím dôvod použiť addEventListener(), funguje až od IE9. Štandardné atribúty fungujú všade a dobre, prečo ich nepoužívať?

//2,5

S tým samozrejme súhlasím, iba by som doplnil, že je dobré zvážiť, kde naslúchať "online" s .on, pretože pri väčšom počte dosť zaťažuje počítač.

14. 5. 2014 00:41:22

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023006

Martin Schlemmer

(36 hodnocení)

14. 5. 2014 01:12:00

Napsal t-pack25;1087671
Nevidím dôvod použiť addEventListener(), funguje až od IE9. Štandardné atribúty fungujú všade a dobre, prečo ich nepoužívať?

Pokud použijete postup v prvním příspěvku

můžete mít k jedné události přiřazenou pouze jednu akci, a lehce se stane, že omylem přepíšete už existující.

IE8- samozřejmě jednoduše podpoříte pomocí attachEvent(); nebo jakéhokoliv existujícího shimu.

14. 5. 2014 01:12:00

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023005

t-pack25

14. 5. 2014 01:20:23

Martin Schlemmer

Áno, ale v tomto prípade sa toho obávať nemusí. Stále to považujem za rozumnejšie, ako potom zaplátavať funkčnosť ďalším zbytočným kódom (keď opomenieme použitie zbytočného jQuery - v príspevkoch vyššie).

14. 5. 2014 01:20:23

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023004

JKHouba

(1 hodnocení)

14. 5. 2014 14:37:08

Napsal malacanek;1087655
Podle mě bude špatně ten cyklus, takto to fungovat nebude, proto se ti to přiřadí až na ten poslední...
Jinak taky by jsem to udělal přes jQuery, ale asi to budeš muset psát ručně pro každý div... stejně chceš na každý div unikátní akci, ne?

Jinak viděl bych to takto:
$(document).ready(function(){ $('#mima1').click(function(){ ... tady nějaká akce ... }); $('#mima2').click(function(){ ... tady zase jiná akce ... }); $('#mim3').click(function(){ ... atd. ... }); });

To už to může zapsat přímo javascriptem do každého divu (onclick=".........") a nemusí stahovat JQuery (pokud to tam už nemá kvůli něčemu jinému) a bude to kratší. A když smaže div, smaže i funkci (nebo její volání).

---------- Příspěvek doplněn 14.05.2014 v 14:42 ----------

Napsal Creator13;1087634
Potreboval by som pre kazdy div priradit urcitu cinnost. Mam 200 divov na stranke a po kliknuti na konkretny div by som chcel vykonat cinnost... kazdy div ma id v tvare mima + cislo (od 1 do 200)
Berie mi vsak po kliknuti na objekt len posledne cislo. Myslel som, ze takymto zapisom priradim pre kazdy div konkretnu pracu s danym divom, ale vsetko sa priraduje len na posledne cislo. Kde robim chybu? Dakujem za pripomienky.

Tady ti to zachytí až poslední hodnotu, protože v divícku ta poslední hodnota bude dřív, než dojde k události onclick na divu. Ta funkce dělá úplně něco jiného, než že počítá a reaguje na div podle ID. Prostě projede dokud platí podnímka. Dej tam třeba jen i<=100 a bude reagovat jen na div s číslem v id 100.

14. 5. 2014 14:37:08

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023003

Creator13

(49 hodnocení)

14. 5. 2014 17:09:54

Dakujem vam za komentare a objasnenie...takisto za pridane riesenia. Martin ten druhy kod ma pravdepodobne niekde chybu. Nemohol by si sa na neho este pozriet?

http://jsfiddle.net/Qm7Dt/ ...alert(originalTargetID); mi vobec nenaskoci po kliknuti.

14. 5. 2014 17:09:54

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023002

JKHouba

(1 hodnocení)

14. 5. 2014 17:18:05

Napsal Creator13;1087874
Dakujem vam za komentare a objasnenie...takisto za pridane riesenia. Martin ten druhy kod ma pravdepodobne niekde chybu. Nemohol by si sa na neho este pozriet?
http://jsfiddle.net/Qm7Dt/ ...alert(originalTargetID); mi vobec nenaskoci po kliknuti.

Protože to v závorce - originalTargetID - je takto bráno jako proměnná (jméno proměnné), kterou nemáš zřejmě definovanou.

14. 5. 2014 17:18:05

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023001

JKHouba

(1 hodnocení)

14. 5. 2014 17:29:09

Nejsem sice Martin, ale přijde mi, že ti tam chybí funkce. Špatně jsi to asi "opsal".

14. 5. 2014 17:29:09

https://webtrh.cz/diskuse/priradenie-eventu-pre-konkretny-div#reply1023000

Martin Schlemmer

(36 hodnocení)

14. 5. 2014 17:29:48