javascript - 当目标有多个类时，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>