DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 15. 03. 2007.   #1
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default jQuery zbun sa eventima...

Momci, navukli ste me na jQuery, sad pomagajte...

Postavio sam sledeću temu na jQuery mailing listu, rekoh možda bi i neko od vas hteo da porazmisli... Tema je na engleskom ali je čini mi se sve jasno.

Hi everybody,

I would be very grateful if someone could explain to me behaviour of the following simple piece of code, which is from my perspective a bit strange:
PHP kôd:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<
html xmlns="http://www.w3.org/1999/xhtml" >
 <
head>
    <
title>Untitled Page</title>
 <
script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">

$(function() { 
    $('#btn1').click(
         function() {
            alert('btn1 clicked');
         }
    );
     $('#btn3').click(
        function() {
             alert('btn3 clicked');
            $('#btn1').click(); 
            $('#btn1').get(0).onclick();
             $('#btn1').get(0).click();
            $('#btn2').click();
             $('#btn2').get(0).onclick();
            $('#btn2').get(0).click(); 
        }
    ); 
    
}); 

function btn2Click() {
     alert('btn2 clicked');
}
 </script>
</head>
 <body>
    <input type="button" id="btn1" value="btn1" /> 
    <input type="button" id="btn2" value="btn2" onclick="btn2Click()" /> 
    <input type="button" id="btn3" value="btn3" />
 </body>
</html> 
The same page could be found at:

http://radioni.ca/jquery-click.html

so you can try it out yourselves.

Click on the third button causes following alerts to be displayed:
  1. btn3 clicked
  2. btn1 clicked
  3. btn1 clicked
  4. btn2 clicked
  5. btn2 clicked
  6. btn2 clicked
  7. btn2 clicked
Why btn1 only twice, and btn2 even four times? (Note: is behaviour from Firefox, seems like IE behaves slightly different. Let's stay with FF for some time)

Thanks in advance, I am not asking this just for fun, I have problems with submit event and I have created this code to simplify and illustrate.
jablan je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #2
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

fora je da $('#btn1').get(0).onclick(); nece uraditi nista, dok ce $('#btn2').get(0).onclick(); pozvati onclick handler jer je on definisan explicitno..

upali firebug, pa prati sta se desava nakon klika na dugme, bice ti jasnije..
__________________
Leadership is the art of getting people to want to do what you know must be done.
ivanhoe je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #3
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default

Citat:
Originalno napisao ivanhoe
fora je da $('#btn1').get(0).onclick(); nece uraditi nista,
Da, ali zašto? Poziv $(nešto).click(nešto) u jQuery-ju postavlja onclick hendler (debagirao sam i unutar jQuery-ja).
Citat:
dok ce $('#btn2').get(0).onclick(); pozvati onclick handler jer je on definisan explicitno..
Ovo je jasno, naravno.

I to još ne daje odgovor na pitanje zašto se hendler za btn2 izvršava 4 (četiri) puta.
jablan je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #4
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

Citat:
Originalno napisao jablan
Da, ali zašto? Poziv $(nešto).click(nešto) u jQuery-ju postavlja onclick hendler (debagirao sam i unutar jQuery-ja).
pa nisam se udubljivao bas u to kako to interno radi, naprosto se tako ponasa kad triggerujes evente iz koda. Sam onclick event nije mapiran direktno u ovu anonimnu funkciju koja pise u kodu, nego u handler metodu jQuery, a ona to mapira dalje pomocu $events niza. U slucaju kad probas da triggerujes direktno onclick na html elementu (a ne preko jQuery click() ) onda doticni handler iskulira poziv. To je ono dokle sam ja dosao u razumevanju kako to interno radi

Sto se tice toga zasto $('btn2').click() pozove dvaput alert, to nisam ni primetio prvi put... to je zaista misterija...

EDIT: U stvari evo provalio sam u cemu je fora, evo sta kaze help za trigger metodu:
Citat:
Trigger a type of event on every matched element. This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing 'submit' to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.
I zaista ako dodas jedan return false; na kraj onclick eventa (onog u input tagu) taj alert ce se pojaviti samo 3 puta, kao sto je i ocekivano..
__________________
Leadership is the art of getting people to want to do what you know must be done.

Poslednja izmena od ivanhoe : 16. 03. 2007. u 12:30.
ivanhoe je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #5
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default

Citat:
Originalno napisao ivanhoe
Sam onclick event nije mapiran direktno u ovu anonimnu funkciju koja pise u kodu, nego u handler metodu jQuery, a ona to mapira dalje pomocu $events niza. U slucaju kad probas da triggerujes direktno onclick na html elementu (a ne preko jQuery click() ) onda doticni handler iskulira poziv.
Tako je, iz razloga što u tom slučaju (direktno pozivanje onNešto na html elementu) jQuery-jev generički event handler, iako se okida, nema informaciju šta je to Nešto (jer i ne postoji stvarni event, dugme nije kliknuto). Iako će neko možda tvrditi da je feature, po meni je to bag u jQuery-ju.

Ajde sad, nije nešto ekstra bitno, cela stvar liči pomalo na akademsku raspravu (ko ikad ručno zove onClick?), ali ovo mi pravi relativno ozbiljan problem u jednoj real-life situaciji:

Submit na form elementu ne okida onsubmit event ako se poziva ručno iz javaskripta (form.submit()). To je tako nevezano za jQuery, proizvođači browsera su jednostavno tako uradili. S obzirom da ASP.NET dobar deo postbackova radi preko form.submit(), MS je dodao parče javascripta koji ručno poziva onsubmit event pre submitovanja forme. E sad, zbog navedenog problema sa jQuery-jem, nijedna akcija koju na formu nakačim putem $('form').submit(funkcija) se ne izvrši.

Rešio sam problem tako što onsubmit event kačim na stari način, umesto putem jQuery-ja. I nerviram se zato što moram da pravim workaround za nešto što samo po sebi treba da ti olakša život... A ovi na jQuery forumu me kuliraju.
jablan je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #6
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default

Hm, otvorio sam ticket i napisao sam peč, baš me interesuje da li će završiti u nekoj od sledećih verzija jQuery-ja...

http://dev.jquery.com/ticket/1053
jablan je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #7
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

palo mi je na pamet jedno sumanuto resenje za takav problem: over-rajdovati ugradjeni submit metod forme i onda umesto submita forma, dodati submit dugme i pozvati click() na njega. Zacudo ovo lepo radi u kombinaciji sa jQuery i u FF i u IE

Znam da nije narocito korisno, ali evo cisto kao proof of the concept:
PHP kôd:
<html>
<
head>
    <
title></title>
<
script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">

$(function() {
    $('form').get(0).submit = function() {  // preuzmemo submit forme
            var forma = $(this).get(0);
            forma.onsubmit(); // pozovemo onsubmit handler rucno
            forma.onsubmit = null; 
            // kreiramo submit dugme i dodamo ga u formu
            var btn = document.createElement('input');
            btn.type = 'submit';
            btn.style.visibility='hidden'; // ovo je reda radi
            forma.appendChild(btn);
                        
            btn.click(); // submitujemo formu
        }
    });

</script>
</head>
<body>
    <form name="frm" method="get" action="" onsubmit="alert('bla')">
    <input type="hidden" name="aaa" value="bbb" />
    <input type="button" id="btn2" name="btn2" value="btn2" onclick="this.form.submit()" />
    </form>

</body>
</html> 
prva ideja koju sam imao je bila malo drugacija, hteo sam da zapamtim referencu na ugradjeni submit metod forme i da ga onda na kraju pozovem da submituje formu, ali to nikako nisam uspeo da nateram da radi. Jel ima neko ideju zasto?
__________________
Leadership is the art of getting people to want to do what you know must be done.

Poslednja izmena od ivanhoe : 16. 03. 2007. u 16:10.
ivanhoe je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #8
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default

Izgleda ok, kad stignem isprobaću kako se ponaša unutar ASP.NET-a (ovako kako stoji sad mislim da bi se alert pozivao dvaput), a i nisam potpuno siguran kako će .NET da reaguje na postback izazvan dinamički kreiranom kontrolom...
jablan je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #9
ivanhoe
Ivan Dilber
Sir Write-a-Lot
 
Avatar ivanhoe
 
Datum učlanjenja: 18.10.2005
Lokacija: Bgd
Poruke: 5.320
Hvala: 104
2.344 "Hvala" u 583 poruka
ivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svimaivanhoe je ime poznato svima
Pošaljite poruku preko Skype™ za ivanhoe
Default

evo, uspeo sam da uradim ono sto sam prvobitno zeleo, mnogo elegantnije resenje:

HTML kôd:
<html>
<head>
    <title></title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">

$(function() { 
    var submit_form = $('form').get(0).submit; //zapamtimo ugradjeni submit
	
    $('form').submit( function() {
        alert('Ovo je onSubmit handler');
        // return false ovde ce spreciti submitovanje forme
    });

    // preuzmemo submit metodu forme
    $('form').get(0).submit = function() {  
        //vratimo ugradjeni metod da izbegnemo rekurziju
        $(this).get(0).submit = submit_form; 
        $(this).submit(); // i uradimo submit + jQuery pozove handler
    }
});

</script>
</head>
<body>
    <form name="frm" method="get" action="">
    <input type="hidden" name="aaa" value="bbb" />
    <input type="button" id="btn2" value="btn2" onclick="this.form.submit()" />
    </form>

</body>
</html>
__________________
Leadership is the art of getting people to want to do what you know must be done.

Poslednja izmena od ivanhoe : 16. 03. 2007. u 17:47.
ivanhoe je offline   Odgovorite uz citat
Staro 16. 03. 2007.   #10
jablan
VD IT Direktora
Invented the damn thing
 
Avatar jablan
 
Datum učlanjenja: 08.06.2005
Lokacija: Beograd
Poruke: 2.118
Hvala: 503
1.307 "Hvala" u 282 poruka
jablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamenjablan je pravi dragi kamen
Default

Jašta, to je to. Ultimate ASP.NET/jQuery submit() fix, dok ovi ne isprave jQuery...

Evo ASP.NET kôda koji ilustruje problem sa komentarisanim fixom, preveo sam komentare ako još nekom nesrećniku zatreba:
Kôd:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">

$(function() {
    $('#form1').submit(
        function() {
            alert('submit');
        }
    );
/*
    // Ivanhoe's form.submit() fix: uncomment to put it in action
    var submit_form = $('form').get(0).submit; // remember default method
    
    // take over form's submit()
    $('form').get(0).submit = function() {  
        // revert to default one to avoid recursion
                $(this).get(0).submit=submit_form; 
                $(this).submit(); // do the submit + jQuery calls the handler
    }
*/
});

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>
jablan je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

Slične teme
Tema Početna poruka teme Forum Odgovori Poslednja poruka
jQuery hover Damjan (X)HTML, JavaScript, DHTML, XML, CSS 11 11. 09. 2008. 14:57
Redizajniran jquery.com kaizen Opušteno 13 06. 09. 2008. 15:29
jQuery i Ext Ilija Studen (X)HTML, JavaScript, DHTML, XML, CSS 7 02. 03. 2007. 12:25


Vreme je GMT +2. Trenutno vreme je 12:22.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.