Hat jQuery Probleme mit per AJAX geladene Elemente?

[Timmer]

Hey,

ich arbeite gerade an einem Layout, das komplett über AJAX Aufrufe läuft. Wenn ein Link - welche in Wirklichkeit bloß Anker sind - geklickt wird, wird eine AJAX-Routine ausgeführt, mit dem neuen Anker als Parameter. Die AJAX-Routine erhält ein Ergebnis und pustet es in den Body.

Soweit so gut. Nun hab ich das Problem, dass Elemente, die per AJAX in den Body gepustet wurden, nicht mehr vom jQuery Event Handler beachtet werden. Wie meinen? Kleines Beispiel:

Ich binde in die index.php die functions.js, in welcher folgendes deklariert ist:

$('#beispiel').click(function(){ alert 'HALLO'; });

Nachträglich lade ich per AJAX den <div id="beispiel"> in den Body. Klicke ich nun auf diesen <div>, passiert rein garnichts. Ein Fehler taucht nicht auf, es scheint so, als ob der Event Handler die Änderung durch AJAX garnicht bemerkt hat.

Hat jemand eine Idee, wie ich das Problem umgehen kann?

MfG Timmer

 

[mermshaus]

- .live() – jQuery API (deprecated)

Das hier scheint die neuere Variante zu sein, habe ich aber noch nicht eingesetzt:

- http://api.jquery.com/on/

Da hat es jedenfalls einen längeren Text.

 

[Timmer]

Leider funktioniert das nicht, warum auch immer. Mit einem onClick Attribut würde es funktionieren, aber ich wollte HTML & JavaScript strikt trennen.

http://main-trip.timmaeh.de/v2/

Hat jemand vielleicht noch eine Idee?

MfG Timmaeh

 

[T!P-TOP]

$('body').live('mouseover', function() {
    // nun erst das click event
    $('selektor').click(function() {

    });
});

Bzw. wie mermshaus sagte eben mit on()

 

[Timmer]

Das funktioniert jetzt leider zu gut, denn er führt die in $('selektor').click(function(){}); definierte Anweisung mehrmals aus.

$("body").on("mouseover", function(){
   $("#proceed_login").on("click", function(){
     //ajax_request('proceed_login');
     alert('Test');
   });
});

http://www.main-trip.de/v2/ (bei Klick auf 'Einloggen')

 

[T!P-TOP]

$("body").on("mouseover", function() { 
    $("#proceed_login").click(function() { 
        //ajax_request('proceed_login'); 
        alert('Test'); 
    });
});

 

[T!P-TOP]

Von der Beschreibung her ist aber live() und on() nicht gerade ähnlich :-?

Versuch mal folgendes:

$('#proceed_login').live({
    click: function () {
        alert('test');
    }
});

 

[Timmer]

Letzteres funktioniert einwandfrei =) Dankeschön^^

 

[mermshaus]

Von der Beschreibung her ist aber live() und on() nicht gerade ähnlich :-?

Ja, das hat mich auch gewundert. Ich hatte bisher keine Zeit, mir das genau durchzulesen, aber .live() wird als deprecated ausgewiesen und .on() als Ersatz.

Ich habe kurz jemanden gefragt, der sich damit besser auskennt.

mermshaus: Kannst du mir kurz erläutern, wieso .on() das neue .live() ist?

A: Ja. .on() ist quasi Standard. Das gibt’s in jeder größeren Bibliothek. Da .on() auch Delegates behandelt, ist es auch logisch, .on() zu benutzen, da .delegate() .live() vorzuziehen war.

mermshaus: Und das wirkt sich auch alles auf nachträglich hinzugefügte DOM-Elemente aus?

A: Ja. .live() bindet direkt Events an den DOM-Tree. Deshalb machen viele .live()-Events eine Anwendung langsam. Bei .on() wird ein Selector mit unveränderlichem Parent-Element angegeben. Das ist also beispielsweise minimal das body-Element.

mermshaus: Ach so. Die Events werden dann beim unveränderlichen Parent-Element abgefangen. Dort wird geprüft, ob ein Event durch ein Kindelement lief, das einen Handler dafür registriert hat. Falls ja, wird der Aufruf dieses Handlers dann dorthin delegiert?

A: Genau.

 

[Timmer]

Also sollte ich doch die Finger von .live() lassen und .on() benutzen? Aber .on() hat bei mir ja "zu gut" funktioniert

 

[mermshaus]

Ja.

Na ja, ein mouseover-Event ist auch kein click-Event. Das sollte mit click ungefähr so aussehen:

$('body').on('click', 'div.test', function () {
    alert('Das sollte bei jedem Klick auf ein div.test in body erscheinen. Auch bei nachträglich hinzugefügten Elementen.');
});

 

[Timmer]

Wunderbar, dankeschön Herr Ermshaus, Sie sind mein Retter =D