阻止 Ajax 触发 jQuery 脚本

Question

我们在 Drupal 网站上得到了一个简单的 jQuery 脚本，它注入了 div class 内容：

(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 load/update.

上注入相同的重复行

如何避免这种情况？我们只希望 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

为什么不使用 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 once 应该在您的环境中可用。就是这样。

Answer 3

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

context变量是这里的关键。

在第一个页面加载时，上下文将是整个 window，但是当 ajax returns 结果时，上下文将只是 [=26] 返回的内容=].
知道这一点，您应该在 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() 必须加载的独立库。

阻止 Ajax 触发 jQuery 脚本

Prevent Ajax from triggering jQuery script

javascript

ajax

jquery

drupal

drupal-7