jquery in Einkaufswelten einbinden

Liebes Forum :slight_smile: :slight_smile: ich habe das folgende Skript per Theme in die Einkaufswelten eingebunden. Das habe ich im Theme gemacht: jQuery(document).ready(function($) { $('.thumbs img').hover(function() { var $src = $(this).attr('data-full-src'); var $srcset = $(this).attr('data-full-srcset'); var $alt = $(this).attr('alt'); var $href= $(this).attr('data-url'); $('#photo-full').attr('src', $src); $('#photo-full').attr('srcset', $srcset); $('#photo-full').attr('alt', $alt); $('#photo-link').attr('href', $href); }); }); Das Skript tauscht per Mausover bzw. per Klick ein Bild aus. Ich habe es auf einer ganz normalen html-Seite getestet und es funktioniert prinzipiell. Und es ist in shopware auch vorhanden (source in chrome). Aber in den Einkaufswelten lĂ€uft es einfach nicht. jquery ist doch standardmĂ€ssig vorhanden? Was könnte ich falsch gemacht haben? Liebe GrĂŒĂŸe Kerstin

Hallo! Die Einkaufswelten werden per Ajax geladen und sind damit nicht von Anfang an verfĂŒgbar. Deshalb greift Dein Hover-Binding ins leere. Verwende statt ('.thumbs img').hover(function() { beispielsweise (‚body‘).on(‚mouseenter‘,’.thumbs img’,function() { Viel Erfolg!

1 Like

Ganz vielen Dank!!! Du bist wirklich ein Held. :slight_smile: :slight_smile: Einfach deine Codezeile eingesetzt und es geht :slight_smile: :slight_smile: :slight_smile: Vorher hab ich rumprobiert und rumprobiert
 Du hast mir wirklich sehr geholfen. Das Problem ist gelöst - aber ich wĂŒrds gerne noch etwas genauer verstehen (eine ungefĂ€hre Vorstellung habe ich). Was ist denn hier der Unterschied zwischen den beiden Varianten. Bzw. warum geht deine und meine nicht? Liebe GrĂŒĂŸe Kerstin

Die erste Variante registriert einen Listener auf jedes Element das durch den Selektor $(’.thumbs img’) gefunden wird sobald die Seite fertig geladen ist. Zu dem Zeitpunkt gibt es aber die Einkaufswelten und damit auch deine Thumbs noch nicht, der Selektor findet also nichts und registriert auch keinen hover-Listener. Die zweite Variante registriert einen Listener auf das body Element. Der prĂŒft dann bei jedem mouseenter Event das irgendwo innerhalb vom body getriggert wird ob das Element dem ĂŒbergebenen Selektor entspricht.

Hey zusammen, wollte noch mal einen kleine ErgĂ€nzung zu @t2oh4e ErklĂ€rung hinzufĂŒgen. Es handelt sich hierbei um Delegates. [quote]Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.[/quote] Hier noch ein Link, falls du ein wenig tiefer in die Materie einsteigen willst: http://learn.jquery.com/events/event-delegation/ Sowie ihr der passende Link in der jQuery API: http://api.jquery.com/on/ Hier ist vor allem der Punkt “Direct and delegated events” interessant. Viele GrĂŒĂŸe, Stephan Pohl :shopware:

vielen Dank fĂŒr die Infos. Jetzt ist es mir klarer. :slight_smile: