Load a jQuery script after fully loading the page

Question

I'm struggeling with this. My jQuery script works fin with every of my input, but not with the input loaded by AJAX, such as the mini-cart input.

The code (and the css) is used to do this : add to each input of quantity to right a + and - to have a better UI, instead of the small default arrows.

See my code :

define([
        "jquery",
        "bootstrap",
    ],
    function($)
    {
        "use strict";
        console.log(" ====== main.js is loaded====== ");

        $(document).ready(function()
        {                
            $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
            $('.quantity').each(function() {
                                btnUp.on("click", function() {
                console.log("up");
                let newVal;
                let oldValue = parseFloat(input.val());
                if (oldValue >= max) {
                    newVal = oldValue;
                } else {
                    newVal = oldValue + 1;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
            });

            btnDown.on("click", function() {
                console.log("down");
                let newVal;
                let oldValue = parseFloat(input.val());
                if (oldValue <= min) {
                    newVal = oldValue;
                } else {
                    newVal = oldValue - 1;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
            });

            });
        });
    });

I tried thing like live, ajaxComplete, ready, even add the code into the default.html part of the checkout minicart.

But the script is not working with ajax loaded content. What should I do ?

Answer 1

Try this code.

define([
        "jquery",
        "bootstrap",
    ],
    function($)
    {
        "use strict";
        console.log(" ====== main.js is loaded====== ");

        $(document).ready(function() {
            $('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');

            $(document).on('click', '.quantity-button.quantity-up', function(event) {
                alert('up button clicked');
                // your custom code
            });

            $(document).on('click', '.quantity-button.quantity-down', function(event) {
                alert('down button clicked');
                // your custom code
            });
        });
    }
);

replace ".quantity-button.quantity-up" with your actual class name anything else.

If you define this way, it will work even after content is loaded by ajax.

Hope this helps.