Forum PHP.pl > [JavaScript]składnia zdarzenia ON

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]składnia zdarzenia ON

smiady

15.05.2014, 22:51:19

Witam.
Ostatnio zauważyłem, że składnia ON ma dwa zapisy z czego mi działa tylko ten drugi, a pierwszy (ten skrócony) już nie dlaczego ?
Korzystam z najnowszego jQuery.
Ten pierwszy skrócony występuje obecnie na stronie głównej jQuery.

[PHP] pobierz, plaintext 
        $('.nowy').on('click', function() {
            alert('dziala');
        });
[PHP] pobierz, plaintext

[PHP] pobierz, plaintext 
        $('#wrzuc').on('click', '.nowy', function() {
            alert('dziala');
        });
[PHP] pobierz, plaintext

Sephirus

15.05.2014, 23:03:21

Hmmm to istnieje już od dłuższego czasu - dokumentacja podaje od wersji 1.7

Tak czy owak tu masz wszystko opisane: http://api.jquery.com/on/ - przeczytaj punkt: "Direct and delegated events"

Coś robisz źle - obie konstrukcje powinny działać bez zarzutu.

Pierwsza dodaje eventhandler do każdego elementu klasy "nowy"

Druga dodaje eventhandler do elementu o id "wrzuc" tak by wylapywal klikanie na elemencie klasy "nowy"

To musi działać...

Nie działać może w momencie gdy robisz coś takiego:

1. Masz pusty element #wrzuc
2. podpinasz event (metoda 1)
taka konstrukcja szuka elementów ".nowy" - których nie znajduje
3. ładujesz jakieś dane do #wrzuc razem z jakimiś elementami ".nowy" - lecz one były wrzucone po fakcie i nie mają podpiętego eventu...

Jak zastosujesz metodę 2:

1. Masz pusty element #wrzuc
2. podpinasz event (metoda 2)
taka konstrukcja podpina event pod sam element #wrzuc dla elementów ".nowy" wewnątrz niego - elementów ".nowy" jeszcze nie ma
3. pojawiają się elementy ".nowy" - klikanie na nie powoduje jakby nie patrzeć klikanie na element w jakim się znajdują - więc na "#wrzuc" - event jest odpalany - sprawdzane jest czy źródłem kliknięcia był element ".nowy" - jeśli tak wszystko działa.

Może tak jest u Ciebie i dlatego Ci to nie działa.

smiady

18.05.2014, 13:31:12

W teorii wydaje mi się że ten kod jest dobry, ale nie działa. Co jest nie tak ?

[PHP] pobierz, plaintext 
<HTML>
<HEAD>
<style>
 
</style>
<script src='jquery-1.10.2.js'></script>
<script>
	$(document).ready(function() {
 
		$('#przycisk').click(function() {
			$("<p class='nowy'>Nowy napis</p>").appendTo('#blok');
		});
 
		$('.nowy').on('click', function() {
			alert('dziala');
		});
 
	});
</script>
</HEAD>
<BODY>
	<div id='blok'>
	</div>
	<button id='przycisk'>dodaj</button>
</BODY>
</HTML>
[PHP] pobierz, plaintext

lobopol

18.05.2014, 13:49:25

Nie jest to poprawny kod, on nie zadziała w tym wypadku bo tworzysz nowy element. W wypadku użycia drugiego zapisu zdarzenie jest podpięte bezpośrednio pod istniejący element i każde kliknięcie w niego sprawdza czy nie kliknęło się w jakiegoś potomka elementu spełniającego warunek posiadania klasy.

Aby składnia $('nowy').on działała musiałbyś po stworzeniu elementu dodawać dodawać mu zdarzenie on np.:

[JAVASCRIPT] pobierz, plaintext 
$('#przycisk').click(function() {
var $el = $("<p class='nowy'>Nowy napis</p>");
			$el.appendTo('#blok');
$el.on('click', function() {
			alert('dziala');
		});
		});
 
 
[JAVASCRIPT] pobierz, plaintext

smiady

24.05.2014, 22:06:31

Dzięki teraz działa.

Tylko, że w tym przypadku można korzystać ze zwykłego zdarzenia click i też będzie działać. Dla mnie skrócony zapis on trochę jest bez sensu, że trzeba go robić tuż po dodaniu elementu.

lobopol

25.05.2014, 17:04:53

click to jest alias dla on('click'), a to że musisz go robić po dodaniu to jest po prostu logiczne, nie podepniesz eventa pod nieistniejący element, możesz natomiast podpiąć zdarzenie pod istniejący element nasłuchując na klikanie w potomka.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.