Jednorazowe zdarzenie w jQuery

Gdy studiowaliśmy odwiązywanie zdarzeń za pomocą metody off, używaliśmy następującej konstrukcji:

$('li').on('click', function() {
	$(this).append('!');
	$(this).off('click', func);
});

Najpierw dołączaliśmy funkcję-obsługę za pomocą on, następnie odwiązywaliśmy za pomocą off.

W jQuery istnieje wygodna metoda one, która pozwala powiązać jednorazowe zdarzenie - wykona się ono tylko raz, a następnie automatycznie odwiąże. Ta metoda jako pierwszy parametr przyjmuje typ zdarzenia, a jako drugi - dołączoną funkcję.

Następujący przykład rozważymy na podstawie poniższego kodu HTML:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Kod CSS wygląda tak:

li {
	width: 100px;
	cursor: pointer;
}

Teraz do każdego li dołączamy jednorazowe zdarzenie:

$('li').one('click', function() {
	$(this).append('!');
});

Kliknij na punkty listy. Jak widzisz, otrzymaliśmy ten sam efekt, dzięki metodzie one.

Podłącz do wszystkich linków zdarzenie - po najechaniu na link na końcu jej tekstu dopisz jej href w okrągłych nawiasach. Po pierwszym najechaniu na link należy odwiązać od niego zdarzenie, które dodaje href na koniec tekstu.

Dla wszystkich inputów zrób tak, aby wyświetlały swój value po naciśnięciu na którykolwiek z nich, ale tylko przy pierwszym naciśnięciu. Ponowne naciśnięcie na input nie powinno wywoływać reakcji.

Dane są akapity z liczbami. Po kliknięciu na akapit powinien w nim pojawić się kwadrat liczby, którą zawiera, ale tylko przy pierwszym kliknięciu. Po podwójnym kliknięciu na akapit liczba w akapicie powinna się podwoić, ale też tylko pierwszy raz.

Dane są akapity. Zrób tak, aby po pierwszym kliknięciu na akapit na jego końcu dodawał się '!', ale tylko przy pierwszym kliknięciu.