Drupal ajax 更新后调用 Jquery 函数答案

【问题标题】：Call Jquery function after Drupal ajax updateDrupal ajax 更新后调用 Jquery 函数
【发布时间】：2017-07-21 13:45:35
【问题描述】：

我在 Drupal 7 网站上有一个电子商务“添加到购物车”表单。

Development site can be found here

我将衣服尺寸显示为单选按钮。

当用户点击一个尺寸时，我使用 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 和其他几个变体，但都没有成功。

【问题讨论】：

你可以使用 ajaxStop api.jquery.com/ajaxStop ，这可以让你知道页面的所有ajax查询何时完成，然后第二次执行你想要的（使用参数来捕获你的ajax）或者您可以使用 ajaxComplete ajaxComplete api.jquery.com/ajaxComplete ，让您在每个 ajax 完成后处理

标签： jquery drupal drupal-7

【解决方案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 将调用这些函数。

发送给函数“context”的第一个参数是已经加载的dom，如果你刚刚加载了页面，则为完整的dom，但如果ajax函数刚刚返回一个新表单，那么该表单dom就是作为“上下文”发送到函数。

发送给“settings”函数的第二个参数是Drupal.settings js 对象，用于将值从php 发送到js。

听起来您可能需要复习一下javascript in Drupal 和this may help with behaviors。

此外，事件侦听器可能不适用于您现在所写的“上下文”。
也许改变：

$('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 中的表单组件中@

【讨论】：