Μοναδικό συμβάν στο jQuery

Όταν μελετούσαμε την αποδέσμευση συμβάντων με τη βοήθεια της μεθόδου off, χρησιμοποιούσαμε την ακόλουθη κατασκευή:

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

Αρχικά προσαρτούσαμε τη συνάρτηση-χειριστή με τη βοήθεια του on, και στη συνέχεια την αποδεσμεύαμε με τη βοήθεια του off.

Στο jQuery υπάρχει μια βολική μέθοδος one, η οποία επιτρέπει τη δέσμευση ενός μοναδικού συμβάντος - θα εκτελεστεί μόνο μία φορά, και στη συνέχεια θα αποδεσμευτεί αυτόματα. Αυτή η μέθοδος δέχεται ως πρώτη παράμετρο τον τύπο του συμβάντος, και ως δεύτερη - τη συνάρτηση που πρόκειται να δεσμευτεί.

Το επόμενο παράδειγμα θα το εξετάσουμε βασισμένοι στον ακόλουθο κώδικα HTML:

<ul>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
</ul>

Ο κώδικας CSS μοιάζει με αυτόν:

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

Τώρα σε κάθε li δεσμεύουμε ένα μοναδικό συμβάν:

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

Κάντε κλικ στα στοιχεία της λίστας. Όπως βλέπετε, πετύχαμε το ίδιο αποτέλεσμα, χάρη στη μέθοδο one.

Δεσμεύστε σε όλους τους συνδέσμους ένα συμβάν - όταν ο δείκτης του ποντικιού περνά πάνω από έναν σύνδεσμο, στο τέλος του κειμένου του προστίθεται το href του σε στρογγυλές παρενθέσεις. Μετά την πρώτη φορά που ο δείκτης περνά πάνω από ένα σύνδεσμο πρέπει να αποδεσμευτεί από αυτόν το συμβάν, που προσθέτει το href στο τέλος του κειμένου.

Για όλα τα πεδία εισόδου κάντε το εξής: έτσι ώστε να εμφανίζουν το value τους όταν πατιέται οποιοδήποτε από αυτά, αλλά μόνο στην πρώτη φορά. Το να πατηθεί ξανά ένα πεδίο εισόδου δεν πρέπει να προκαλεί αντίδραση.

Δίνονται παράγραφοι με αριθμούς. Με κλικ σε μια παράγραφο θα πρέπει να εμφανιστεί σε αυτήν το τετράγωνο του αριθμού, που περιέχει, αλλά μόνο στο πρώτο κλικ. Με διπλό κλικ σε μια παράγραφο ο αριθμός σε αυτήν θα πρέπει να διπλασιαστεί, αλλά και πάλι μόνο την πρώτη φορά.

Δίνονται παράγραφοι. Κάντε το εξής, ώστε στο πρώτο κλικ σε μια παράγραφο στο τέλος της να προστίθεται '!', αλλά μόνο στο πρώτο κλικ.