Javascript 防止Ajax触发jQuery脚本

我们在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.behaviors.myHelpText={
附加：功能（上下文、设置）{
//代码开始
//更改占位符文本
$（'.form item quantity'）.append（'对于超过10个订单，要求批量定价'）；
$（'.help block'）.css（“弹性基础”，“100%”）；
//代码结束
}
};
})（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.myHelpText={
附加：功能（上下文、设置）{
如果（！document.getElementById（'help'））{
$（'.form item quantity'）。追加(
“如果订单超过10个，则要求批量定价”
);
$（'.help block'）.css（“弹性基础”，“100%”）；
}
}
};
})（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.myHelpText={
附加：功能（上下文、设置）{
如果（！document.getElementById（'help'））{
$（'.form item quantity'）。追加(
“如果订单超过10个，则要求批量定价”
);
$（'.help block'）.css（“弹性基础”，“100%”）；
}
}
};
})（jQuery）；

为什么不使用jQuery一次？我的想法——这是一个经典的方法。一堆例子都存在于文档中

$（'.form item quantity'）。一次（'help-added'）。追加（'For orders over 10 call For volume pricing'）

我不确定你是否需要通过js应用样式。css文件是一个更好的地方。jquery once应该可以在您的环境中使用。就这样。
为什么不使用jQuery一次呢？我的想法——这是一个经典的方法。一堆例子都存在于文档中

$（'.form item quantity'）。一次（'help-added'）。追加（'For orders over 10 call For volume pricing'）

我不确定你是否需要通过js应用样式。css文件是一个更好的地方。jquery once应该可以在您的环境中使用。就是这样。
您必须了解，drupal.behavior会在页面加载时触发，并且在ajax返回结果时触发。它是这样设计的，因为您可能希望代码在ajax结果上再次运行，例如，如果您正在通过ajax更新页面的一部分，并且需要应用事件侦听器，或者添加一个类

上下文
变量是这里的关键

在第一次页面加载时，上下文将是整个窗口，但当ajax返回结果时，上下文将是ajax返回的内容。

知道这一点，您应该在jquery选择器中使用
上下文
。

例如

（函数（$）{
Drupal.behaviors.myHelpText={
附加：功能（上下文、设置）{
//代码开始
//更改占位符文本
$（'.form item quantity'，context）.append（'对于超过10个的订单，要求批量定价'）；
$（'.help block'，context）.css（“弹性基础”，“100%”）；
//代码结束
}
};
})（jQuery）；

为了增加对多次处理的内容的保护，可以使用jquery once（），但如果在选择器中使用上下文变量，则通常不需要这样做。jQuery once（）必须加载的单独库
 您必须了解，drupal.behavior在页面加载时启动，在ajax返回结果时启动。它是这样设计的，因为您可能希望代码在ajax结果上再次运行，例如，如果您正在通过ajax更新页面的一部分，并且需要应用事件侦听器，或者添加一个类

上下文
变量是这里的关键

在第一次页面加载时，上下文将是整个窗口，但当ajax返回结果时，上下文将是ajax返回的内容。

知道这一点，您应该在jquery选择器中使用
上下文
。

例如

（函数（$）{
Drupal.behaviors.myHelpText={
附加：功能（上下文、设置）{
//代码开始
//更改占位符文本
$（'.form item quantity'，context）.append（'对于超过10个的订单，要求批量定价'）；
$（'.help block'，context）.css（“弹性基础”，“100%”）；
//代码结束
}
};
})（jQuery）；

为了增加对多次处理的内容的保护，可以使用jquery once（），但如果在选择器中使用上下文变量，则通常不需要这样做。jQuery once（）必须加载的单独库
 ajax调用在哪里？您可以添加逻辑来检查元素是否已经存在，如果已经存在，则不要添加它。如果没有更多的信息，将不会有多大帮助。@IsaacVidrine它是Drupal商务平台，有100个模块，不知道如何在这里提取代码。
if（！$（'.help block'）.length）{//追加数据}
ajax调用在哪里？您可以添加逻辑来检查元素是否已经存在，如果已经存在，则不要添加它。如果没有更多的信息，将不会有多大帮助。@IsaacVidrine它是Drupal商务平台，有100个模块，不知道如何在这里提取代码。
if（！$（'.help block'）.length）{//追加数据}
是否意味着它仍然在每次Ajax事件中调用它？它正在工作。谢谢。我对Drupal一无所知，所以不能说调用函数的时间/地点。尽管这仍然有效，但这是否意味着它仍然会在每次Ajax事件中调用它？它正在工作。谢谢。我对Drupal一无所知，所以不能说调用函数的时间/地点。尽管这仍然有效。