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

Question

I cannot figure out why my jQuery event handler does not fire in this cirucmstance. I have exhausted my research on 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, which does not fire as it should when user clicks element with class 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);
             }
          }
       });
    }

FYI, this loop dynamically loads event handlers from an object of various subscription form data. The selector looks like this in practice:

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

Research as shown me that when pst-subscribe-motherhood-kit is the element's class value alone, without any other class, jQuery fires as expected.

WORKS: <div class="pst-subscribe-motherhood-kit">Some text</div>

DOES NOT WORK: <div class="my-class pst-subscribe-motherhood-kit">Some text</div>

As always, any help is appreciated.

EDIT: added the object that is iterated through. And, YES, the DOM is loaded before this function is called. It is called in the footer.

Answer 1

You can use let instead of var for creating individual scope in each iteration of the for loop:

 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>