Diskuze: Čtení ID z <tr> pomocí JQUERY a JS

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Ilidanek33

Člen

Ilidanek33:8.8.2017 14:12

Zdravím, potřeboval bych pomoct tady s tímto:

Function One(){
    var data = "blabla";
    $("tr").dblclick(function(){Two(data);});
}

Function Two(aData){
    //a tady potřebuju alert(ID FROM CLICKED TR);
}


<tr id="table_item0" style="cursor: pointer; background-color: rgb(255, 255, 255);" onmouseover="this.style.backgroundColor=&quot;#DFDDDD&quot;;" onmouseout="this.style.backgroundColor=&quot;#ffffff&quot;"><td style="width: 12%;">25110161</td><td>Blablabla lalala</td></tr>

Zkrátka mám tabulku, každý <tr> má svoje ID a já potřebuju zobrazit ID od toho <tr>, na které jsem dvakrát kliknul ve funkci Two, zatímco ten dblclick event vytvářím ve funkci One.

Mohl by mi s tím prosím někdo pomoct?
Předem všem děkuju

Odpovědět

8.8.2017 14:12

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:8.8.2017 14:24

funkce, kterou posilas do dblcick muze brat argument event, ten obsahuje informaci o tom, co bylo targetem one udalosti
vezmi ten event a posli si ho do funkce Two spolu s 'data' prozkoumej ho pomoci console.log nebo projdi dokumentaci jQuery a budes videt co potrebujes
http://api.jquery.com/Types/#…

Editováno 8.8.2017 14:26

Nahoru Odpovědět

8.8.2017 14:24

Neaktivní uživatelský účet

Ilidanek33

Člen

Ilidanek33:8.8.2017 14:44

Dokumentaci jsem prošel, ale stejně se mi to nepodařilo nijak udělat, aby to fungovalo.. Štvu se tady s tím už pár hodin a stále bez výsledku, proto jsem napsal tady na forum .. Každopádně díky za radu

Nahoru Odpovědět

8.8.2017 14:44

Ilidanek33

Člen

Ilidanek33:8.8.2017 15:16

Mám to!! Problem byl v tom, že jsem to psal celou dobu špatně :-D Toto je správné řešení:

Function One(){
    var data = "blabla";
    $("tr").dblclick(function(event){Two(data, event);});
}

Function Two(aData, aEvent){
   alert(aEvent.currentTarget.id);
}


<tr id="table_item0" style="cursor: pointer; background-color: rgb(255, 255, 255);" onmouseover="this.style.backgroundColor=&quot;#DFDDDD&quot;;" onmouseout="this.style.backgroundColor=&quot;#ffffff&quot;"><td style="width: 12%;">25110161</td><td>Blablabla lalala</td></tr>

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

8.8.2017 15:16

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:8.8.2017 15:22

Tak s cim mas problem?
event.target je element na ktery byl vyvolan double click ne?
pouzivas dev tools? stiskni F12 a prepni na tab console
potom pomoci console.log(event) prozkoumej jak vypada event
pak mi napis s cim teda mas ten zasadni problem/s cim si nevis
kdyz mi reknes co ti neni jasne, je to zalezitost minut

Nahoru Odpovědět

8.8.2017 15:22

Neaktivní uživatelský účet

Ilidanek33

Člen

Ilidanek33:8.8.2017 15:28

Problém byl v tom, že jsem levej.. Celou dobu jsem tam psal hlouposti, místo toho, abych napsal: function(event) a pak ještě aEvent.currentTarget.id

Nahoru Odpovědět

8.8.2017 15:28

Wal De Mar-Lad

Člen

Wal De Mar-Lad:8.8.2017 15:34

PS: Zoptimalizoval by som to trochu. Tvoja konštrukcia registruje event handler pre každé TR v tabuľke zvlášť. Čiže ak máš čo len 10 riadkov v tabuľke, máš tam 10 krát registrovanú funkciu function(event){Two(data, event);}. Radšej si zaeviduj len jeden event hadler, pre celú tabuľku - napríklad $('table#mojeId') a čekuj event target.

Nahoru Odpovědět

8.8.2017 15:34

Libraries over frameworks...

Marian Benčat

Člen

Marian Benčat:9.8.2017 15:17

Mohu se zeptat (v tomto tě uznávám) v čem má výhodu 1 event přes event delegation, než 10x zaregistrovaný event? Jako.. Vím o tom, že se to dělává, vím o tom, že vytváření funkce je performance problém /naráží na to - nebo narážel React s pure higher-order funkcemi/, ale proč?
'
Jakože.. myslím, že to má smysl na stovky eventů a odchytávat to na rootu.. ale takto? Má to smysl?

Editováno 9.8.2017 15:18

Nahoru Odpovědět

9.8.2017 15:17

Totalitní admini..

Wal De Mar-Lad

Člen

Wal De Mar-Lad:9.8.2017 17:41

Poradil som mu to preto, že mám pocit, že tie funkcie sa týkajú tabuľky, ktorú generuje na strane klienta po tom, čo si pre ňu asynchrónne načíta dáta a potom ich v cykle parsuje - vytvára nové riadky a appenduje ich do tabuľky. Čo je v pohode, bežná prax. Akurát to vyzerá, že on zároveň potrebuje, aby každý appendnutý riadok počúval na udalosť onclick. Aj to je v pohode. Ale vyzerá to, že nevie ako sa to robí. Zdá sa, že pochopil, že nemôže registrovať event handler pre zatiaľ neexistujúce značky, ale len pre tie, ktoré sú v DOMe v okamihu registrácie hadlera. A tak sa to rozhodol riešiť nešťastným spôsobom: v slučke, pre každú položku v načítaných dátach, spustí funkciu ktorá appendne riadok do tabuľky a následne pre ten riadok zaregistruje onclick callback... Vyzerá to, že proste nevie, že pre zatiaľ neexistujúce značky sa to robí tak, že sa zaregistruje jediný callback - na parentovi - a následne sa bude udalosť delegovať na child objekt. Myslím si to preto, že je to priam klasika, ktorú som musel vždy vysvetľovať na školeniach jQuery: ak chceš dopredu zaregistrovať onclick pre existujúce riadky, tak napíš $('tr').on('click', callback) a ak na zatiaľ neexistujúce, tak napíš $('tbody').on('click', 'tr', callback). To bol hlavný dôvod, prečo som mu to poradil - že si myslím, že proste nevie, že to ide aj takto.

A po druhé, výkonové problémy. Ak náhodou pôjde vykresliť čo len 50 riadkov na stranu, čo je pomerne bežná prax, tak réžia aplikácie bude vysoká - 50 krát vytvárať novú funkciu, uzáver čo ostáva trčať v ramke, dá zabrať ako procesoru, tak ramke. A po druhé, do DOMu sa má v rámci možností appendovať naraz - nachystať si nový obsah a raz pripojiť, nie 50 krát po sebe. Inak sa môže, a asi aj dopustí layout trashingu a zasa spomalí vykreslenie stránky. A takto urobená stránka otvorená na mobile, tam by jeho konštrukcia mohla úplne pokaziť user experience - samý lag a pamäťová náročnosť - možný memory leak a pád prehliadača.

Takže ... ja neviem, či malo zmysel mu to poradiť. Len som mal z tých jeho funkcií pocit, že chce dosiahnuť niečo, čo sa robí inak a nie tak, ako to rieši on. To bol hlavný dôvod.

Nahoru Odpovědět

9.8.2017 17:41

Libraries over frameworks...

Marian Benčat

Člen

Marian Benčat:9.8.2017 18:33

děkuju

Nahoru Odpovědět

9.8.2017 18:33

Totalitní admini..

Wal De Mar-Lad

Člen

Wal De Mar-Lad:9.8.2017 19:32

rado sa stalo

Nahoru Odpovědět

9.8.2017 19:32

Libraries over frameworks...

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.

Nejčastěji vyhledáváné

Diskuze: Čtení ID z <tr> pomocí JQUERY a JS