0

Noob question I apologize, but I have been struggling with this for way too long

jQuery(".mutiple_form_navigation_link > div" ).on( "click", function() {
        jQuery("#shipping_customer_details .validate-required").each(function(){
            console.log(jQuery(this));
                if (jQuery(this).hasClass('wooccommerce-invalid')) {
                    alert('invalid shipping');
                }
        });

Looking at the raw html when clicking

<p class="form-row form-row-last validate-required validate-Select woocommerce-invalid woocommerce-invalid-required-field showErrors" id="shipping_last_name_field" data-priority="">

It has the class woocommerce_invalid

Looking at the console.log in my jquery it says

p#shipping_last_name_field.form-row.form-row-last.validate-required.validate-Select.woocommerce-invalid.woocommerce-invalid-required-field.showErrors

Showing woocommerce-invalid is a class... yet hasClass is not triggering because apparently woocommerce-invalid was not there on DOM load, but rather after input validations?

How do I modify my on("click") jQuery to detect the class in the DOM...?

Brian Bruman
  • 883
  • 12
  • 28
  • Because getting elements that match a selector and then doing something with them is a thing that happens immediately. – Quentin Jul 06 '20 at 17:12
  • Just to expand on the above comment - which is certainly the correct answer: On the very first line of your code snippet there, what you're doing is looking for an element and attaching an event. If that element doesn't exist when the code runs - it won't work. What you can do instead is write your listener like this: jQuery( document ).on( 'click', '.mutiple_form_navigation_link > div' ... This way - you're attaching the event to document click and THEN checking what has been clicked - so it will fire for dynamically created elements. – JBoss Jul 06 '20 at 20:55
  • @JBoss that's actually very easy. Thank you for dumbing it down for me :) – Brian Bruman Jul 07 '20 at 17:41

0 Answers0