当目标有多个类时，jQuery单类选择器不会触发

Question

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

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。它在页脚中被调用。

Answer 1

您可以使用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>