change(); delegate(); undelegate();
change() metódus.
Weboldalnál felhasználó, csak az űrlapmezőkbe írhat adatot, vagy az ott lévőt változtathatja meg.
Ebből kifolyólag a change() metódust, ott tudjuk igazából alkalmazni.
Működik, <input> <textarea> és <select> elemeknél.
Módosítsuk űrlapmezők tartalmát, és kattintsunk más területen!
<head>
<script>
$(document).ready(function(){
$("#form01>input, #form01>textarea").change(function(){
alert("Az eredeti szövegtartalom, megváltozott.");
});
});
</script>
</head>
<body>
<form name="form01" id="form01">
<input type="text" size="80" value="Szerződés határozatlan időre szól."/><br />
<input type="text" size="80" value="Ügyfél a szerződést, minden év október 25-ik napján mondhatja fel."/><br />
<textarea name="textarea" id="textarea" cols="40" rows="3" >
Megjegyzés:
Szolgáltató a szerződésben foglalt tevékenységek díját, előzetes értesítés nélkül, az inflációnak megfelelően módosíthatja.
</textarea><br />
<br />
Nem ért egyet a feltételekkel, írja be a nem szót. <input type="text" size="20" value="igen"/><br />
<input type="submit" value="Új teszthez, kattints ide!"/>
</form>
</body>
|
Input value megváltoztatása külső eseménnyel.
Szöveges űrlapmezők meglévő value értékét megváltoztathatjuk, ha az eredeti nem felel meg.
Ezt a változást, change() metódus nem veszi figyelembe.
Oka:
change () metódus aktiválásához, elsőként az inputmezőbe kell kattintani, majd tartalmát megváltoztatni, és ezt követően inputmezőn kívül kattintani!
<head>
<script>
$(document).ready(function(){
$("#ujValue").click(function(){
$("#inp01value").attr("value","Szerződést az ügyfél, Október 01-től December 31-ig felmondhatja.")
alert("Az eredeti szövegtartalom, megváltozott.");
});
$("#ujValue02").click(function(){
$("#inp01value").attr("value","Szerződést az ügyfél, felmondhatja.")
alert("Az eredeti szövegtartalom, megváltozott.");
});
});
</script>
</head>
<body>
<input type="text" id="inp01value" size="100" value="Ügyfél a szerződést, minden év október 25-ik napján mondhatja fel."/>
Kattints valamelyik p elemre. <p id="ujValue"> 1. Új value választás. Kattints ide! <p id="ujValue02"> 2. Új value választás. Kattints ide! </body> |
Megjegyzés:
Űrlapmezőre meghatároztuk a change() metódust és a value módosítást is, akkor problémába ütközünk.
A value értékének módosítása nem lehetséges, ha a change() egyszer lefutott.
delegate() metódus.
Kiválasztott elemhez vagy elemekhez, eseményt társít.
A jQuery 1.7-es verziótól kezdve:
on() metódus használata ajánlott, a következő módszerek helyett: bind(), live(), és delegate().
<head>
<script>
$(document).ready(function(){
// Így, mindegy melyik div szakaszban kattintunk, egy p elemre.
$("div").delegate("p", "click", function(){
$("p").css("background-color", "pink");
});
------------------------------------------------------------------------------------------------------------------------------
// Így, csak akkor aktiválódik minden p elemre, ha a kiválasztott azonosítóval rendelkező div szakaszban kattintunk, egy p elemre.
$("#delegacio").delegate("p", "click", function(){
$("p").css("background-color", "pink");
});
-----------------------------------------------------------------------------------------------------------------------------
// Így, csak azonosítóval rendelkező div szakaszban lévő, p elemekre van hatással, ha az ott lévő valamelyik p elemre kattintunk.
$("#delegacio").delegate("p", "click", function(){
$("#delegacio > p").css("background-color", "pink");
});
});
</script>
</head>
<body>
|
<p>Ez egy p bekezdés. De nem a kiválasztott div elemben helyezkedik el. Kattints ide! Nem történik semmi!</p>
<div id="delegacio"> <p>Ez is egy p bekezdés. Kattints ide, vagy a következő bekezdésre.</p> <p>Ez is egy p bekezdés, amikor e <div> belsejében, egy "p" elemre kattintanak, megváltozik e területen lévő, összes "p" elem háttérszíne!<p> </div> |
undelegate() metódus.
Vegye ki az összes eseményt, mely a delegate() metódussal rakodott az elemre vagy elemekre:
A jQuery 1.7-es verziótól kezdve:
off() metódus használata ajánlott, a következő módszerek helyett: unbind(), die(), és undelegate().
<head>
<script>
// Így, azonnal aktiválódnak, ha belépünk az oldalra:
$("body").undelegate(); // Ez, a body területén lévőkre vonatkozik.
$("#delegacio").undelegate(); // Ez, az id=delegacio azonosítóval rendelkező div területén lévőkre vonatkozik.
// Így, akkor aktiválódik, ha az esemény bekövetkezik. Példánkban, a button gombra kattintáskor:
$(document).ready(function(){
$("#btnundelegate").click(function(){
$("#delegacio").undelegate();
});
});
</script>
</head>
<body>
<button id="btnundelegate">undelegate() Töröljük a delegate() eseményeket. Kattints ide!</button>
</body>
|
Emlékeztető példák
A jQuery 1.7-es verziótól kezdve:
on() metódus használata ajánlott a következő módszerek helyett: bind(), live(), és delegate().
off() metódus használata ajánlott a következő módszerek helyett: unbind(), die(), és undelegate().
$(document).ready(function(){
// Átállás bind() metódusról, on() metódusra.
$("#onbind01").on("click", function(){
$(this).css("background-color", "pink");
});
$("#onbind02").bind("click", function(){
$(this).css("background-color", "pink");
});
// Átállás delegate() metódusról, on() metódusra.
$("#ondelegate01").on("click" ,"p", function(){
$(this).css("background-color", "pink");
});
$("#ondelegate02").delegate("p", "click", function(){
$(this).css("background-color", "pink");
});
// Átállás live() metódusról, on() metódusra.
$("#onlive01").on("click", function(){
$(this).css("background-color", "pink");
});
$("#onlive02").live("click", function(){
$(this).css("background-color", "pink");
});
});
|
Átállás bind() metódusról, on() metódusra. on() metódus. Kattints ide! bind() metódus. Kattints ide! Átállás delegate() metódusról, on() metódusra. on() metódus. Kattints ide! delegate() metódus. Kattints ide! Átállás live() metódusról, az on() metódusra. on() metódus. Kattints ide! live() metódus. Kattints ide! |