• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage jQuery Event Delegation

xSTVNx

Mitglied
Mahlzeit,

ich weiß nicht, ob mein Englisch zu schlecht oder ich einfach zu doof bin, aber ich bekomme es nicht auf die Reihe, obwohl ich bereits zig stackoverflow-Threads und in den offiziellen Docs gelesen habe...

HTML:
<body>
    ...
  
    <div class="siteMain">
      
        <!-- Hier wird bei Aufruf der Seite Content via AJAX reingeladen, vorallem: -->
      
        <input type="text" class="color" ... />
      
        <!-- Diese(s) Input-Element(e) möchte ich aber anschließend noch manipulieren, was aber nicht möglich ist. -->
      
    </div>
  
    ...
</body>


Ich glaube zumindest verstanden zu haben, dass die Lösung meines Problems in der Event Delegation liegt, jedoch bekomme ich es nicht hin. :mad:

Javascript:
$('.siteMain').on('keyup','input.color',function(){ // habe auch nur 'input' probiert usw...

    console.log('Eingabe erfolgt'); // spuckt nix aus

});

Was mache ich falsch? Bin um jegliche Erläuterungen usw. sehr dankbar. :cool:
 
Werbung:
Was mache ich falsch?
Eigentlich machst du nichts falsch.
Event delegation ist allerdings nicht das Problem, sondern die Lösung! Die jQuery-Dokumentation beschreibt es sehr treffend:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Ref

Ich habe ein funktionierendes JSFiddle gemacht. Achte darauf, dass dein Parent-Element ein static ancestor ist, also nicht später reingeladen wird! Dieses Element wird auch als Selektor genutzt: $('static-selector').on().

Ansonsten kann ich mir nicht erklären, woher dein Fehler stammen könnte.
 
Event delegation ist allerdings nicht das Problem, sondern die Lösung!

Das hatte ich versucht auszudrücken. :p

[...] dass die Lösung meines Problems in der Event Delegation liegt [...]


Ich habe es nun hinbekommen, indem ich es an document gebunde habe – an .siteMain ging nachwievor nicht (was nicht nachvollziehbar ist).

Javascript:
$(document).on('keyup','input.color',function(){

    console.log('Eingabe erfolgt');

});
 
Werbung:
Das wäre das nächste was ich vorgeschlagen hätte, da ich das früher auch immer so gemacht hatte.

Ich muss allerdings zugeben, dass ich aus den Zeiten, wo man das DOM direkt manipuliert, ein wenig raus bin. Mir fällt deshalb keine Begründung ein, warum es in deinem Falle nicht funktionieren sollte, zumal ich ein passendes Beispiel geliefert habe.

Ich erinnere mich aber, dass ich das Problem auch mal hatte. Vielleicht wissen da andere mehr. Habe für die nächsten Tage leider auch keine Mittel zum recherchieren.
Tut mir leid.
 
Wenn nix geht kannst du ja beim holen des inhalt ( deine inputs ) auch gleich das script mit holen, das geht dann aufjedenfall.

Ich habe das mal gerade nachgebaut was @Aaron3219 da gebaut hat und das geht ja.
hole ich die Felder über ajax funktioniert das so nicht mehr.
Wenn man die inputs und das script holt ,geht es .Oder das script für die inputs in einer function packen und beim request aufrufen.

Ich bin aber noch an probieren und googeln weil verstehe das gerade auch nicht das das Beispiel von AAron geht ,aber wenn man es mit ajax holt dann nicht mehr.
Zumindes in meinen versuchen und bei dir schein es ja auch nicht zu klappen
 
Zuletzt bearbeitet:
Habe da aber die Lösungen die ich in post #5 geschrieben habe rausgenommen.
Also nur noch das um was es geht , doch leider geht es bei mir auch nicht.
Vieleicht habe ich es auch falsch gemacht,doch auch mit rum testen kriege ich es nur mit den gesagten Lösungen aus #5 hin
 
Zuletzt bearbeitet:
Werbung:
jo .
habe input in document geändert und es geht.
Was so nee kleinigkeit schon ausmachen tut.
Gut , ich habe es jetzt gescheckt . Vielen Dank schon mal.
Wollen wir mal hoffen das es den TE auch irgendwie weiter helfen tut. Aber es scheint ja das es das ja schon so gemacht hat.
Vieleicht kann er ja mal seinen ganzen Code zeigen, der Fehler muß ja irgendwo zu finden sein
 
Zurück
Oben