Event geht bei html-Manipulation verloren

[Kerstin83]

Liebes Forum
ich habe folgendes Problem. Auf einer Webseite ist (vom CMS-System her) eine jQuery Lupe (CloudZomm) eingebunden. Wenn man mit der Maus auf das Bild kommt, wird es gezoomt.
Nun habe ich andere Bildchen auf der Seite mit einem mouseover gebunden. Wenn ich auf diese Bildchen komme, wird das ZoomBild gewechselt. Das mache ich mit folgendem Code (vereinfacht):

function mover(picture_path) {
    $zoommerk = $('#zoomwrap').html();
    $( '#zoomwrap').html('<img src=' + picture_path +'>')
}
function mout() {
    $('#zoomwrap').html($zoommerk);
} 

mover wird bei mouseover ausgeführt und mout bei mouseout.
Wenn ich also auf das Bildchen gehe, wird ein anders Bild (Pfad: picture_path) bei #zoomwrap angezeigt und wenn ich das Bildchen wieder verlasse wird das html wieder hiergestellt und das alte Bild angezeigt.
Das klappt soweit auch. Das Problem ist, dass die Lupe dann nicht mehr funktioniert. Ich glaube, dass das mouseover-Event der Lupe dann irgendwie überschrieben/deaktiviert ist oder so.
Hat jeman eine Idee, wie man das lösen kann, dass die Lupe dann wieder funktioniert?

Liebe Grüße

Kerstin

[tkausl]

Setz doch einfach einen neuen src für das schon bestehende img, anstatt einen neuen img zu erstellen.

[Kerstin83]

Danke, werde ich mal testen. Melde mich dann noch einmal.

[Kerstin83]

Dankeee!!!

Klappt super. So kann man das also austricksen.

[lottikarotti]

Hallöchen,

Klappt super. So kann man das also austricksen.

Damit wird gar nichts ausgetrickst. Der Event-Handler bleibt lediglich bestehen, weil das Element nicht vom DOM entfernt wird, bevor es wieder neu angeklemmt wird. Für alles andere bietet jQuery Delegated Events. Die sind für diesen Use Case zwar die falsche Wahl, aber es ist gut mal davon gehört zu haben.

Viele Grüße,
lotti

[Kerstin83]

Wirklich sehr interessant! Danke!

[Kerstin83]

Hallo,

ich habe da noch einmal eine Nachfrage. Eigentlich ist das Konzept das ich da fahre nicht richtig. Es funktioniert - dürfte es aber eigentlich nicht.

Ist ein bisschen kompliziert:

Also ich habe im Zoom das bild1 (bild1.jpg). Bei mouseover auf ein kleines Bildchen wird wie oben beschrieben das Attribut src des Zoombildes geändert, z.B. auf bild 2. bild1 wird sich in einer Variablen gemerkt. Wenn ich das Bildchen wieder verlasse wird das src wieder auf bild1 zurückgesetzt. So wie gewünscht.
Nun kann man die Bildchen auch anklicken. Dann wird per php das Zoombild auf bild2 (wie das Vorschaubild) gesetzt. Wenn das geschehen ist und ich das Bild verlasse, würde ich erwarten, dass per mouseout der alte Wert, bild1, den sich JavaScript ja gemerkt hat, wieder gesetzt wird. Das ist aber nicht so. Beim Verlassen des Bildchens bleibt bild2.

Das entspricht dem gewünschten Verhalten, aber gibt es dafür eine Erklärung?

Ich hoffe, das war einigermaßen verständlich. Sonst bitte nachfragen.

Liebe Grüße

Kerstin

[Gast]

Nun kann man die Bildchen auch anklicken. Dann wird per php das Zoombild auf bild2 (wie das Vorschaubild) gesetzt. Wenn das geschehen ist und ich das Bild verlasse, würde ich erwarten, dass per mouseout der alte Wert, bild1, den sich JavaScript ja gemerkt hat, wieder gesetzt wird.

wieso rewartest du das?

[Kerstin83]

naja, bild1 ist im Speicher, und wenn ich das Bildchen verlasse (mouseout), sollte das Attribut src auf bild1 gesetzt werden. Was aber nicht passiert.

Hier der Code (vereinfacht):

var $src_stack;

function mover(picture_path) {
    $zoompic     = $('#zoom1');
    $src_stack   = $zoompic.attr('src'  );
    $zoompic.attr('src',picture_path );
}
function mout() {
    $zoompic = $('#zoom1');
    $zoompic.attr('src'  , $src_stack  );
}

[Gast]

wo ist da php und wieso unterschlägst du bei der vereinfachung das problem des scopes?

[Kerstin83]

php macht das cms-System. Weiß nicht genau was da passiert. Sollte aber nichts mit dem JavaScript zu tun haben, oder?

wieso unterschlägst du bei der vereinfachung das problem des scopes

Ich habe mal Scope nachgeschlagen. Da kam "Sichtbarkeit einer Variablen". Meinst du die Sichtbarkeit der Variablen $src_stack? Die ist doch im Code vorhanden. Sie ist für alle JavaScript-Funktionen sichtbar.

[Gast]

debug doch bitte mal was wo passiert.
das $ am anfang von js variablen übrigens ist sehr verwirrend.

[Kerstin83]

das $ am anfang von js variablen übrigens ist sehr verwirrend.

Ich habe in einem jQuery-Buch gelesen, dass bei jQuery-Variablen (DOM-Objeke) das $ am Anfang eine Konvention sei. Deswegen mache ich das. Ist das wirklich falsch? Oder ist das keine jQuery-Variable in dem Sinn?

Ich debugge dann mal...

[Gast]

So this means we should not use it in our code just because it looks cool, unless we are programming a framework that can really benefit from it, because it makes the global framework object unique and separate from the rest of the code.

[nikosch]

dass bei jQuery-Variablen (DOM-Objeke) das $ am Anfang eine Konvention sei.

Das sind aber keine "jQuery-Variablen".

Was bei jQ DOM-Objekte repräsentiert, was Atribute, was das jQuery-Obejt selbst und was nicht, das herauszufinden wäre gleich die näcshte Aufageb für Dich. Im Moment scheinst Du zu versuchen, durch wildes Raten voranzukommen.