jQuery .on ('change', function () {} wird nicht für dynamisch erstellte Eingaben ausgelöst

147

Das Problem ist, dass ich einige dynamisch erstellte Sätze von Eingabe-Tags habe und auch eine Funktion habe, die jedes Mal ausgelöst werden soll, wenn ein Eingabewert geändert wird. 

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

Dies .on('change')wird jedoch nicht für dynamisch erstellte Eingaben ausgelöst, sondern nur für Elemente, die beim Laden der Seite vorhanden waren. Leider lässt mich das ein bisschen hängen .on, da es der Ersatz für sein soll .live()und .delegate()alle Wrapper für .bind(): /

Hat jemand anderes dieses Problem gehabt oder eine Lösung gekannt?

javascript jquery Nick
quelle

Antworten:

272

Sie sollten einen Selektor für die onFunktion bereitstellen :

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

In diesem Fall funktioniert es wie erwartet. Es ist auch besser, ein Element anstelle eines Dokuments anzugeben.

Lesen Sie diesen Artikel zum besseren Verständnis: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Artem Vyshniakov
quelle
1
Du bist toll! Ich hatte auch dieses Problem. Ich hätte nie gedacht, dass Sie den Selektor als zweiten Parameter hinzufügen könnten.
Tomatrox
1
Ja, wie bereits erwähnt, ist es gut, sich auf ein Element anstatt auf ein ganzes Dokument zu beschränken, falls der dynamische Teil nach einem Div dieses verwendet, zum Beispiel: $ ('# ajax_table'). on ('change', 'input ', function () {...
Raul Gomez
3
Wie kann ich später damit arbeiten, wenn mein Element dinamisch geworden ist? $ das gibt mir leeres Objekt.
AleXela
Es wirkt wie ein Zauber. Vielen Dank ! Außerdem können wir .once () verwenden, um zu verhindern, dass doppelt dieselbe Logik hinzugefügt wird;)
Ben Cassinat
Alternative Syntax: $(document).on({ change: handleChange }, 'input');plus die Funktion const handleChange = (event) => { $(event.target)...Es ist schön, die Probleme zu vermeiden this.
Dem Pilafian
23

Benutze das

$('body').on('change', '#id', function() {
  // Action goes here.
});
Dixon
quelle
Zu Ihrer Information, @enrey bezog sich $('#id')im Code anstelle von'#id'
Loaf
14

Sie können einen beliebigen Ansatz anwenden:

$("#Input_Id").change(function(){   // 1st
    // do your code here
    // When your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd (A)
    // do your code here
    // It will specifically called on change of your element
});

$("body").on('change', '#Input_Id', function(){    // 2nd (B)
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});
Arsman Ahmad
quelle
3 
$("#id").change(function(){
    //does some stuff;
});
Azhar
quelle
11
hmm ... wie wäre es mit einer Erklärung des Snippets?
Kleopatra
12
Dies funktioniert bei dynamisch erstellten Elementen immer noch nicht, da beim Laden des Dokuments versucht wird, eine Bindung herzustellen. Die Antwort von @ArtemVyshniakov ist jedoch an das Dokument gebunden, und wenn sich etwas in einem der Elemente ändert, wird es ausgelöst, da es aufgrund des zweiten Arguments auf das erforderliche Element abzielen kann. (Das heißt, wenn die Funktion ausgelöst wird, wird
geprüft
Dieser Code funktioniert erst, wenn das vorinstallierte DOM verwendet wird. Sie müssen den Selektor als dokumentbezogene Variable api.jquery.com/on/#on-events-selector-data
Ben Cassinat
2

Nur um mögliche Verwirrung zu klären. Dies funktioniert nur, wenn beim DOM-Laden ein Element vorhanden ist:

$("#target").change(function(){
    //does some stuff;
});

Wenn ein Element später dynamisch geladen wird, können Sie Folgendes verwenden: 

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});
Dynero
quelle
2 
$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}
Vinod Kumar
quelle
1

Sie können das Ereignis 'input' verwenden, das auftritt, wenn ein Element Benutzereingaben erhält.

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

Dokumentation von w3

Alex
quelle
1

Sie können verwenden:

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

Es funktioniert bei mir.

Yehia Fouad
quelle