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 ?

Instead of $(document).ready(function() you should use $(window).load(function() — Amit Naraniwal
– Amit Naraniwal, Commented Feb 22, 2019 at 11:33
Hello, You can check out this link magento.stackexchange.com/questions/220323/… — surbhi agr
– surbhi agr, Commented Feb 22, 2019 at 13:08

Yash Shah · Accepted Answer · 2019-02-22 12:23:22Z

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.

Stack Exchange Network

Load a jQuery script after fully loading the page

1 Answer 1

Your Answer

Linked

Hot Network Questions

Load a jQuery script after fully loading the page

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions