Question

我无法弄清楚为什么我的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。在页脚中称为

。

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>

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

1 个答案: