防止Ajax触发jQuery脚本

Question

我们在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代码在页面加载一次即可工作。

Answer 1

仅在元素不存在时添加它，否则不执行任何操作。

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

Answer 2

您必须了解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（），但是如果在选择器中使用context变量，通常不需要这样做。 jQuery Once（）必须加载的单独库。

Answer 3

为什么不一次使用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一次应该在您的环境中可用。 而已。