Jquery: Code working in Chrome but not in Firefox

Question

I have a function showBubble() which runs on page load

var showBubble = function() {
                if ($.cookie("bubblepromo")) {
                    if ($.cookie("bubblepromo") == "deleted") {
                        $(".authorization-link .popup").hide();
                    } else {
                        $(".authorization-link .popup").show();
                    }
                } else {
                    $.cookie("bubblepromo", "popup", { path: '/' });
                    $(".authorization-link .popup").show();
                }
                $(".authorization-link .popup #close").click(function () {
                    $.cookie("bubblepromo", "deleted", { path: '/' });
                    $(".authorization-link .popup").hide();
                });
                alert('show bubble');
            }
   
$(window).on('load', function(){
    setTimeout(showBubble, 3000);
});

I have used setTimeout to run the jquery 3 secs after page load. The function showBubble() shows a bubble popup based on value of a cookie bubblepromo

The above code works fine in Chrome but doesn't work in Firefox. I used Firefox debugger and set a breakpoint for this line of code

$(".authorization-link .popup").show();

But for some reason this line of code is not getting executed sometimes. This issue is intermittent.

Answer 1

Replace $(window).on('load') with document.ready function:

$(document).ready(function(){ 
//method goes here
});