Neu jQuery Code wird korrekt eingebunden, aber reagiert nicht

[MaxWe]

Moin Moin,

wir haben einige Zeilen Javascript / jQuery Code, der auf der Produktdetailseite arbeitet. Nun haben auch wir festgestellt, dass uns Ajax da zwischen die Beine grätscht und die Scripte nach dem wechsel einer Variation nicht mehr funktionieren..
Also habe ich das Forum durchsucht und bin auf die Lösung per Plugin und Hook 45 gestoßen, also fix umgesetzt und der Hook tut ansich sein Werk!

Leider habe ich nun das Problem, dass der Hook zwar funktioniert, ein einfaches console. log ist kein Problem, aber die einigen Zeilen Javascript/jQuery Code, die eigentlich benötigt werden agieren nicht wie geplant mit den Elementen im DOM.
Ich nehme an, dass hier die Reihenfolge des Ladens der DOM Struktur ein Problem ist..

Kennt da vielleicht jemand eine Lösung?

So sieht es derzeit in der "Hook-Datei" aus:

<?php

$args_arr["objResponse"]->script("jQuery(function($) {  $(document).ready(function(){//Produkt-Konfigurator: Wechsel der Größenreihe nach ausgewählter Farbe
    $('.product-configuration').find('button.colorswatch').on('click',function(){
        $(this).closest('.row').find('button').removeClass('active');
        $(this).addClass('active');
        $(this).closest('.col-md-10').find('div.sizesrow').hide();
        $(this).closest('.col-md-10').find('div[data-id=\"'+$(this).attr('data-id')+'\"]').show();
    });
    
    //Kategorieseite: Einblenden des Hovermenüs
    $('#product-list').find('div.image-wrapper').hover(
        function(){
            $(this).find('div.kategorieHover').slideDown('fast');   
        }, function(){
            $(this).find('div.kategorieHover').slideUp('fast');   
        }
    );
    
    //Kategorieseite: Wechsel des VaterBildes bei Hovern auf spezifisches Produkt
    $('a.hoverelement').hover(
        function() {
          var img    = $(this).attr('data-img');
          var finder = $(this).attr('original-img');
          $('img[data-src=\"'+finder+'\"]').attr('src',img);
        }, function() {
            var img = $(this).attr('original-img');
            $('img[data-src=\"'+img+'\"]').attr('src',img);
        }
      );
    
    //Produktdetailseite: Produkte Slider, wechseln der Produktpalette
    $('ul.productNav').find('a').on('click',function(){
        var element = $(this).attr('data-id');
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
        $(this).closest('div.modal-content').find('div.katSliders').hide();
        $(this).closest('div.modal-content').find('#'+element).show();
    });
    console.log('max Skript');
});
});
");

?>

Das console.log wird anstandslos ausgeführt und auch die anderen Sachen geben keine Fehler aus! Sie werden lediglich nicht getriggert..
Desweiteren versuche ich eigentlich den benötigten Code automatisch aus mehreren Dateien laden zu lassen, leider bekomme ich da immer nur eine 0 zurück?
Sähe dann so aus:

<?php
$js_content = file_get_contents('./js/js_max.js');
$js_content .= file_get_contents('./js/js_maxim.js');
$js_content  .= file_get_contents('./js/js_sonstiges.js');

$args_arr["objResponse"]->script("$js_content");
?>

Vielen Dank schon einmal im Voraus.. In letzter Zeit bin ich ja doch öfters hier... Es fällt immer wieder etwas neues an.

Beste Grüße,
Max

 

[css-umsetzung]

Wenn dein code vorher funktionierte und nur durch das nachladen mittels ajax gestört wird, hättest du das mit dem on() beheben können.

Also würde ich dann lieber das hover und click sowie andere events mit dem on() bauen, damit die evenrs nach dem ajax neu initialisiert werden wäre das z.b.

Ungetestet und nur als Beispiel zu sehen

$('.product-configuration').on('click', 'button.colorswatch',   function(){

Ansonsten wäre ein link zum anschauen nicht schlecht, denn es könnte ja sein das du ein zeitliches Problem hast.

 

[FPrüfer]

Hallo,

Kennt da vielleicht jemand eine Lösung?

die einfachste Lösung wäre hier - wie von css-umsetzung vorgeschlagen - mit Event-Delegation zu arbeiten. Dabei bindest du das Event nicht direkt an ein Element, sondern an ein Übergeordnetes mit Verweis auf das eigentliche Element. Du "delegierst" das Ereignis an einen anderen "Verantwortlichen". Der Vorteil dabei ist, dass der Event-Handler erhalten bleibt, auch wenn das Ziel-Element entfernt und neu eingefügt wird.
Also statt das Hover-Event direkt an die Elemente zu binden

$('#product-list').find('div.image-wrapper').hover(...

geht das auch per Delegation an ein Übergeordnetes (hier beispielhaft einfach an body):

$('body').on('hover', '#product-list div.image-wrapper', ...

 

[MaxWe]

Vielen Dank schon einmal für eure Antworten

An die Lösung die Events an etwas übergeordnetes, das einfachste ist hier das 'document' Element, hatte ich auch schon gedacht. Leider ist es dann so, dass ich nicht mehr das angesprochene Element direkt als Objekt 'this' zur Verfügung habe, oder muss man es dann nur anders abgreifen?

Wir haben nun eine Lösung.. Etwas doppelt gemoppelt, aber es funktioniert.
Das Javascript bleibt wie es ist und wird doppelt eingebunden.
Erste Stelle: Per Plugin, dieses bindet das Javascript automatisch ein.
Zweite Stelle: Im Template, hier mit einer Besonderheit. Gestern bin ich auf einen JS Eventhandler vom JTL Shop gestoßen: 'evo:contentLoaded'
Ich horche auf diesen Handler und füge dort meinen Code ein. Funktioniert tadellos. Die Einbindung über das Plugin sorgt dafür, dass das Javascript bei Seitenaufruf zur Verfügung steht, die Einbindung über das Template sorgt dafür, dass es nach dem Ajax Aufruf wieder zur Verfügung steht.

Mit der file_get_contents Geschichte bin ich leider auch nicht weitergekommen, würde aber ja scheinbar auch nicht helfen, da der HOOK selbst scheinbar nicht der "richtige" für mich ist.

Die Lösung ist möglicherweise etwas quick & dirty, sollte aber vorerst funktionieren.
Beste Grüße

 

[css-umsetzung]

Ich sehe bei unserer vorgeschlagenen Lösung keine Probleme mit dem this. Ich wäre eher vorsichtig mit dem event contentloaded. Da hatte ich schon öfter mal Timing Probleme.

 

[MaxWe]

Ich sehe bei unserer vorgeschlagenen Lösung keine Probleme mit dem this.

Hmm, bisher hatte ich immer das Problem, dass dann das document selbst im this lag und nicht das selektierte.
$(document).on('click','selektor',function(){...}); Hier ist this = document bei mir.

Ich wäre eher vorsichtig mit dem event contentloaded. Da hatte ich schon öfter mal Timing Probleme.

Ich werde es dennoch erst einmal so lassen. Sollte sich herausstellen, dass ich mit der vorgeschlagenen Lösung die Elemente trotzdem ordentlich ansprechen kann, stelle ich es nach und nach noch um.
Bisher funktioniert es, sollte ein Fehler auftreten habe ich aber aufjedenfall schon einmal einen Ansatz, vielen Dank also für die Warnung