0

I checked in Chrome console that (document).ready fires when the relevant HTML elements are not present in DOM yet. Any idea why it happens? The code goes to QtyChng function and only highlights the selector line. This should be fine as it applies the event listener, but as it happens too early, this listener won't work.

(function($){

    $(document).ready(function(){   
        QtyChng();
    });

    function QtyChng() {
        $(".woocommerce form.cart, .woocommerce td.product-quantity, .woocommerce li.product").off("click", ".qib-button").on( "click", ".qib-button", function() {
            // do stuff     
        });
    }

})(jQuery);
Phil
  • 157,677
  • 23
  • 242
  • 245
Ryszard Jędraszyk
  • 2,296
  • 4
  • 23
  • 52
  • Are those elements part of the initial HTML source or are they loaded dynamically? – Phil Jul 30 '19 at 01:10
  • 1
    `$(document).ready()` fires when the DOM loads, not magically when you add things later. – StackSlave Jul 30 '19 at 01:13
  • 1
    I see the problem now - some plugin puts JavaScript inline and it includes HTML elements that I expected, it must be recreating them later. – Ryszard Jędraszyk Jul 30 '19 at 01:42
  • You can probably use event delegation to capture the _click_ event. Not sure if you'll have much luck using `.off()` though – Phil Jul 30 '19 at 02:12
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Phil Jul 30 '19 at 02:12
  • Thanks, Phil. Replacing `$(".woocommerce form.cart, .woocommerce td.product-quantity, .woocommerce li.product")` with `$(document)` solved the issue for 2 plugin users with similar problem. I read that it won't have a significant performance impact as some people would claim, so I'm going to stick with this solution for compatibility sake. – Ryszard Jędraszyk Aug 02 '19 at 00:53

0 Answers0