Call Jquery Funktion nach Drupal Ajax Update

Question

Ich habe ein E-Commerce-Formular "in den Warenkorb" auf einer Drupal 7-Website.

Development site can be found here

I Größen von Kleidung wie Radio-Buttons am anzeigt.

Wenn der Benutzer auf eine Größe klickt, verwende ich jquery, um eine Wrapper-Klasse hinzuzufügen, damit ich die ausgewählte Option hervorheben kann. Wenn der Benutzer zum ersten Mal auf die Größe klickt, wird die jquery ausgelöst und der orange Hintergrund wird angezeigt - aber nur kurz. Ich glaube, dass ein Ajax-Aufruf die Steuerelemente auffrischt und die Wrapper-Klasse verliert. Wenn Sie erneut auf die gleiche Größe klicken, bleibt die Klasse haften.

Mein JQuery ist einfach:

(function($) { 
    $(document).ready(function(){ 
    $('body').on('click','.commerce-add-to-cart .form-radios input',function(){ 
     $(this.parentNode).removeClass('radio-checked'); 
     $(this.parentNode).addClass('radio-checked'); 
    }); 
    }); 
})(jQuery); 

Also, meine Frage ist - wie kann ich meine Jquery-Funktion aufrufen, wieder nach der Ajax ausgelöst hat? Gibt es einen Haken, den ich nicht kenne, der nach dem Ajax-Aufruf ausgelöst wird, oder gibt es einen Jquery-Befehl, der helfen könnte? Ich habe .setTimeout, .pause und einige andere Varianten ohne Erfolg versucht.

Answer 1

Sie sollten drupal Verhalten für Ihr Javascript verwenden.
Mit Drupal Verhalten, würde Ihr Code wie folgt aussehen:

(function ($) { 
    Drupal.behaviors.myCustomStuff = { 
    attach: function (context, settings) { 
     $('body', context).on('click','.commerce-add-to-cart .form-radios input',function(){ 
     $(this.parentNode).removeClass('radio-checked'); 
     $(this.parentNode).addClass('radio-checked'); 
     }); 
    } 
    }; 
}(jQuery)); 

Grundsätzlich Drupal.behaviors nur eine Liste von Funktionen, die Drupal nennen, wenn die Seiteoder wenn ein Ajax-Aufruf abgeschlossen geladen wird.

Das erste an die Funktion "context" gesendete Argument ist das dom, das geladen wurde, das vollständige dom, wenn Sie gerade die Seite geladen haben, aber wenn eine Ajax-Funktion gerade ein neues Formular zurückgegeben hat, dann ist dieses Formular dom wird als "Kontext" an die Funktion gesendet.

Das zweite Argument, das an die Funktion "settings" gesendet wird, ist das Objekt drupal.settings js, mit dem Werte von php an js gesendet werden.

Es klingt, als ob Sie möglicherweise eine Auffrischung an javascript in Drupal und this may help with behaviors benötigen.

Auch der Event-Listener funktioniert möglicherweise nicht mit dem 'Kontext' geschrieben wie Sie es jetzt haben.
Vielleicht ändern:

$('body', context).on('click','.commerce-add-to-cart .form-radios input',function(){ 

zu

$('.commerce-add-to-cart .form-radios', context).click(function(){ 

Was ich oben geschrieben habe, ist, wie man richtig Javascript zu tun in Drupal 7, aber ich bin nicht sicher, ob es Ihr Problem beheben wird, wie es ist schwer zu sagen, ohne genau zu wissen, wie Ihr Formular funktioniert.
Wenn Sie Wrapper um Teile von Formen wollen je nachdem, was ausgewählt wird, und es verwendet Ajax, könnten Sie in einem form_alter