在Drupal Ajax更新后調用Jquery函數

Question

我在Drupal 7網站上有一個電子商務“添加到購物車”表格。

開發站點可以在這里找到

我將衣服的大小顯示為單選按鈕。

當用戶單擊大小時，我使用jquery添加包裝類，以便突出顯示所選的選項。 用戶第一次單擊大小時，jquery會觸發，並且它會得到我設置的橙色背景-但只是短暫的。 我相信ajax調用會刷新控件，並且會丟失包裝器類。 再次單擊相同的大小會使班級堅持下去。

我的jQuery很簡單：

(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);

所以，我的問題是-在ajax觸發后如何重新調用我的jquery函數？ 是否有一個我不知道的鈎子在ajax調用后被觸發，或者是否有某種Jquery命令可能會有所幫助？ 我嘗試了.setTimeout，.pause和其他幾個變體，但均未成功。

Answer 1

您應該為JavaScript使用drupal行為。
使用Drupal行為，您的代碼如下所示：

(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));

基本上，Drupal.behaviors只是在頁面加載或ajax調用完成時 Drupal將調用的函數的列表。

發送到函數“上下文”的第一個參數是已加載的dom，如果您剛剛加載了頁面，則是完整的dom，但是如果ajax函數剛剛返回了新的表單，則該表單dom將作為“功能”。

發送到函數“設置”的第二個參數是Drupal.settings js對象，該對象用於將值從php發送到js。

聽起來您可能需要在Drupal中的javascript上進行復習， 這可能有助於解決問題 。

同樣，事件偵聽器可能無法與您現在擁有的“上下文”一起使用。
也許改變：

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

至

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

我上面發布的內容是如何在Drupal 7中正確執行javascript，但是我不確定它是否可以解決您的問題，因為在不確切知道表單如何工作的情況下很難說出來。
如果要根據選擇的內容包裝表單的各個部分，並且使用ajax，則最好在form_alter中將類添加到表單組件中