Event Sekali Pakai di jQuery

Saat kita mempelajari pelepasan event dengan menggunakan metode off, kita menggunakan konstruksi berikut:

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

Pertama kita memasang fungsi handler dengan menggunakan on, kemudian melepaskannya dengan off.

Di jQuery ada metode yang praktis one, yang memungkinkan untuk mengikat event sekali pakai - event tersebut akan dieksekusi hanya satu kali, lalu secara otomatis terlepas. Metode ini pada parameter pertama menerima tipe event, dan pada parameter kedua - fungsi yang diikat.

Contoh berikut akan kita bahas berdasarkan kode HTML di bawah ini:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Kode CSS terlihat seperti ini:

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

Sekarang ke setiap li kita ikat event sekali pakai:

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

Coba klik pada item daftar. Seperti yang Anda lihat, kita mendapatkan efek yang sama, berkat metode one.

Ikatkan event ke semua tautan - saat tautan dihover, di akhir teksnya ditambahkan href-nya dalam tanda kurung. Setelah pertama kali hover pada tautan event yang menambahkan href di akhir teks harus dilepaskan darinya.

Untuk semua input, buat sehingga mereka menampilkan value-nya sendiri saat ditekan, tetapi hanya pada tekanan pertama. Tekanan ulang pada input tidak boleh memicu reaksi.

Diberikan paragraf dengan angka. Saat diklik, paragraf harus menampilkan kuadrat dari angka yang dikandungnya, tetapi hanya pada klik pertama. Pada klik ganda, angka dalam paragraf harus digandakan, tetapi juga hanya untuk pertama kalinya.

Diberikan paragraf. Buat sehingga pada klik pertama pada paragraf, di akhir paragraf ditambahkan '!', tetapi hanya pada klik pertama.