防止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

您必须了解drupal.behaviors在页面加载时以及ajax返回结果时触发。之所以这样设计，是因为您可能希望您的代码在ajax结果上再次运行，例如，如果要通过ajax更新页面的一部分并且需要应用事件侦听器或添加一个类。该context变量是这里的关键。在第一页加载时，上下文将是整个窗口，但是当ajax返回结果时，上下文将恰好是ajax返回的内容。知道这一点，您应该context在jquery选择器中使用。例如。(function($) {&nbsp; Drupal.behaviors.myHelpText = {&nbsp; &nbsp; attach: function (context, settings) {&nbsp; &nbsp; //code starts&nbsp; &nbsp; //change placeholder text&nbsp; &nbsp; $('.form-item-quantity', context).append('<span class="help-block">For orders over 10 call for volume pricing</span>');&nbsp; &nbsp; $('.help-block', context).css("flex-basis", "100%");&nbsp;&nbsp; &nbsp; //code ends&nbsp; &nbsp; }&nbsp; };})(jQuery);为了防止多次处理，您可以使用jquery Once（），但是如果在选择器中使用context变量，则通常不需要这样做。jQuery Once（）必须加载的单独库。