防止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($) {

  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（）必须加载的单独库。