jQuery not able to access element on click

Okay, so here is my issue. I have a script going which was adding a .newsletter-shown class to the master $(‘html’) element (which displayed a mailing list modal window) & I set the scss to do all of it’s smooth transitioning based on that class. But today I added a new button to the dom, an active element ID mail-btn, with the purpose for it to be able to re-add the .newsletter-shown class to the $(‘html’) element… but here came the problem. I was no longer able to interact with whatever element had the .newsletter-shown class to it. I tried it on the html, body & div tags & each time the initial modal would display, but then become unreachable by click. Why is it that my active button (which gets the alerts & click events) does not trigger the adding of classes back to the initial element?
Here is the link to the working file with the problem : Link

Thanks everyone in advance.

All in Theme-mvp.js:
line 17 ends in a semicolon, ending your variable declaration, which causes everything below it to be misinterpreted.
line 21 tries to invoke a dot in the middle of a variable declaration chain,
line 26 has another semicolon when you’re trying to continue the list of variable declarations,
line 47 throws a TypeError because $(this).waypoint is undefined…

Thank you for your help. Some of those fixes I can’t believe I didn’t catch. I’ve gone ahead & made all those changes & still, the button will not set a class to the html element.

The button is invoking both the $('#mail-btn').click(function(e) { (line 148) and $(document).click(function(event) { (line 92) events, causing the thing to add and then immediately remove the classes as the event bubbles up from the button to the document. Try adding e.stopPropagation(); on line 149 of theme-mvp.js?

Try these fixes

  • Try using event delegation to attach the click event to a parent element already in the DOM.
  • check whether the click event for the button is firing or not before any other event handlers that might be preventing clicks on the underlying element.