javascript - 目标具有多个类时，jQuery单类选择器不触发

我无法弄清楚为什么我的jQuery事件处理程序在这种情况下不触发。我已经用尽了对堆栈溢出的研究。

HTML：

<div class='pst-header-ad parenting pst-subscribe-motherhood-kit'>
  <div class='pst-header-ad-wrap'>
    <h3></h3>
    <p></p>
  </div>
</div>

JS，当用户单击类为pst-subscribe-motherhood-kit的元素时，它不会触发应有的状态：

    var subscribeForms = [
        {
            formclass : "pst-subscribe-motherhood-kit",
            formnumber : "151496",
            formtitle : "Get Your FREE Mom Kit Now!",
            formdescription : "Leave your email below and we'll send you our Mom Kit packed full of printables that will make your mom journey more fun. You'll also receive email updates from me from time to time. Enjoy your Mom Kit!!",
            formredirect : "https://pintsizedtreasures.com/landing-pages/mom-bundle-offer/"
        }, {
            formclass : "pst-subscribe-marriage-kit",
            formnumber : "151501",
            formtitle : "Get Your FREE Marriage Kit Now!",
            formdescription : "Where should we send your Marriage Kit? Leave your email below and you'll receive three printables: a praying for your husband printable, simple, romantic ideas printable and love notes printable. You'll also receive email updates from time to time from me. Enjoy your Marriage Kit!",
            formredirect : "https://pintsizedtreasures.com/landing-pages/marriage-bundle-offer/"
        }
];

    for (var i = 0; i < subscribeForms.length; i++) {
       jQuery("." + subscribeForms[i].formclass).click(function(e) {
          e.preventDefault();
          for (var j = 0; j < subscribeForms.length; j++) {
             if (this.className == subscribeForms[j].formclass) {
                var formnumber = subscribeForms[j].formnumber;
                var formtitle = subscribeForms[j].formtitle;
                var formdescription = subscribeForms[j].formdescription;
                loadForm(formnumber, formtitle, formdescription);
             }
          }
       });
    }

仅供参考，此循环从各种订阅表单数据的对象动态加载事件处理程序。选择器实际上是这样的：

jQuery(".pst-subscribe-motherhood-kit").click(function(e) { ... }

研究表明，当pst-subscribe-motherhood-kit仅是元素的类值，而没有任何其他类时，jQuery将按预期方式触发。

作品：<div class="pst-subscribe-motherhood-kit">Some text</div>

不起作用：<div class="my-class pst-subscribe-motherhood-kit">Some text</div>

与往常一样，我们将提供任何帮助。

编辑：添加了被迭代的对象。而且，是的，在调用此函数之前已加载DOM。在页脚中称为。

最佳答案

您可以使用let代替var在for循环的每次迭代中创建单个范围：

var subscribeForms = [{formclass: 'pst-header-ad-wrap'},{formclass: 'pst-header-ad-wrap-2'}];

for (let i = 0; i < subscribeForms.length; i++) {
   jQuery("." + subscribeForms[i].formclass).click(function(e) {
      e.preventDefault();
      console.log(subscribeForms[i].formclass);
   });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='pst-header-ad parenting pst-subscribe-motherhood-kit'>
  <div class='pst-header-ad-wrap'>
    pst-header-ad-wrap
    <h3></h3>
    <p></p>
  </div>
  <div class='pst-header-ad-wrap-2'>
    pst-header-ad-wrap-2
    <h3></h3>
    <p></p>
  </div>
</div>