防止Ajax触发jQuery脚本

Posted 2021-04-17

我们在Drupal网站上有一个简单的jQuery脚本，它注入一个包含内容的div类：

(function($) {
Drupal.behaviors.myHelpText = {
  attach: function (context, settings) {

    //code starts

//change placeholder text

$('.form-item-quantity').append('<span class="help-block">For orders over 10 call for volume pricing</span>');
$('.help-block').css("flex-basis", "100%"); 

    //code ends

  }
};
})(jQuery);

该页面包含Drupal Commerce和各种产品属性字段，每次选择属性时都会被Ajax处理。在执行此操作时，我们的脚本每次在Ajax加载/更新时都会注入相同的重复行。

怎么避免呢？我们只希望jQuery代码在页面加载时工作一次。

答案

仅添加元素（如果不存在），否则不执行任何操作。

(function($) {
  Drupal.behaviors.myHelpText = {
    attach: function (context, settings) {

      if (!document.getElementById('help')) { 
         $('.form-item-quantity').append(
            '<span id="help" class="help-block">For orders over 10 call for volume ricing</span>'
         );
         $('.help-block').css("flex-basis", "100%");
      }

     }
  };
})(jQuery);

另一答案

您必须了解drupal.behaviors会在页面加载和ajax返回结果时触发。它是以这种方式设计的，因为您可能希望代码在ajax结果上再次运行，例如，如果您通过ajax更新页面的一部分并且需要应用事件侦听器或添加类。

context变量是关键。

在第一页加载时，上下文将是整个窗口，但是当ajax返回结果时，上下文将只是ajax返回的内容。 知道了这一点，你应该在你的jquery选择器中使用context。 例如。

(function($) {
  Drupal.behaviors.myHelpText = {
    attach: function (context, settings) {

    //code starts

    //change placeholder text

    $('.form-item-quantity', context).append('<span class="help-block">For orders over 10 call for volume pricing</span>');
    $('.help-block', context).css("flex-basis", "100%"); 

    //code ends

    }
  };
})(jQuery);

为了防止多次处理某些事情，可以使用jquery once（），但如果在选择器中使用上下文变量，通常不需要这样做。 jQuery once（）必须加载的独立库。

另一答案

为什么不使用jQuery一次？我的想法 - 这是一种经典的方法。一堆例子存在于drupal.org的文档中

$('.form-item-quantity').once('help-appended').append('<span class="help-block">For orders over 10 call for volume pricing</span>');

而且我不确定你是否需要通过js应用样式。一个css文件是一个更好的地方。并且jquery曾经应该在您的环境中可用。而已。