Wenn Sie jemals dynamisch Seiteninhalte generieren oder Inhalte über AJAX laden, ist das folgende Beispiel genau das Richtige für Sie:
- Es verhindert die Doppelbindung, wenn das Skript mehrmals geladen wird, z. B. in einer AJAX-Anforderung.
- Die Bindung befindet sich auf dem
body
Dokument. Unabhängig davon, welche Elemente hinzugefügt, verschoben, entfernt und erneut hinzugefügt werden, body
behalten alle Nachkommen, die mit dem angegebenen Selektor übereinstimmen, die ordnungsgemäße Bindung bei.
Der Code:
var bind_to = ':input';
$(document.body).off('change', bind_to);
$(document.body).on('change keyup', bind_to, function(event) {
alert('something happened!');
});
Bitte beachten Sie! Ich benutze aus mehreren Gründen $.on()
und $.off()
nicht andere Methoden:
$.live()
und $.die()
sind veraltet und wurden in neueren Versionen von jQuery weggelassen.
- Ich müsste entweder eine separate Funktion definieren (wodurch der globale Bereich überfüllt wird) und die Funktion an beide
$.change()
und $.keyup()
separat übergeben oder dieselbe Funktionsdeklaration an jede aufgerufene Funktion übergeben. Logik duplizieren ... Was absolut inakzeptabel ist.
- Wenn Elemente jemals zum DOM hinzugefügt werden, werden sie beim Erstellen
$.bind()
nicht dynamisch an Elemente gebunden. Wenn Sie :input
an das DOM binden und dann eine Eingabe hinzufügen, wird diese Bindemethode daher nicht an die neue Eingabe angehängt. Sie müssten dann die Bindung explizit aufheben und dann erneut an alle Elemente im DOM binden (andernfalls werden Bindungen dupliziert). Dieser Vorgang müsste jedes Mal wiederholt werden, wenn eine Eingabe zum DOM hinzugefügt wurde.