jQuery zbun sa eventima...

jablan · 15. 03. 2007.

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:

btn3 clicked
btn1 clicked
btn1 clicked
btn2 clicked
btn2 clicked
btn2 clicked
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.

ivanhoe · 16. 03. 2007.

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..

jablan · 16. 03. 2007.

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.

ivanhoe · 16. 03. 2007.

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..

jablan · 16. 03. 2007.

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 · 16. 03. 2007.

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

ivanhoe · 16. 03. 2007.

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?

jablan · 16. 03. 2007.

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...

ivanhoe · 16. 03. 2007.

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>

jablan · 16. 03. 2007.

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>

15. 03. 2007.	#1
jablan VD IT Direktora Invented the damn thing Datum učlanjenja: 08.06.2005 Lokacija: Beograd Poruke: 2.118 Hvala: 503 1.307 "Hvala" u 282 poruka	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: btn3 clicked btn1 clicked btn1 clicked btn2 clicked btn2 clicked btn2 clicked 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.

16. 03. 2007.	#2
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	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.

16. 03. 2007.	#7
ivanhoe Ivan Dilber Sir Write-a-Lot Datum učlanjenja: 18.10.2005 Lokacija: Bgd Poruke: 5.320 Hvala: 104 2.344 "Hvala" u 583 poruka	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.

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