IE JQuery ready function not working

问题:

Apparently many people have run into this problem, but I have yet to be able to find a solution that works.

I have a bit of code which needs to run once the page has loaded, and so I stuck it inside the following block:

$(document).ready(function() {
    alert("Running initialization");
    initialize();
});
function checkDivLoaded() {
    if ( $('#footer').length == 0) $.error( 'not ready' );
}
function initialize() {
    try{
        checkDivLoaded();
        ...more code here
    } catch (err) {
        setTimeout(initialize, 200);
    }
}

This works fine in all browsers, with the exception of IE. There, the code does not execute at all.

This code is at the lowest point on the page that I can put it (using the Zend Framework and page-specific ready() functions means that there is a limit to how low on the page it can go). I've checked the includes for the js files, which are all being loaded from a local version, and they all have the form

<script type="text/javascript" src=""></script>

Any ideas?

NOTE

When I open the debugger in IE, this starts to work correctly.

回答1:

I don't see anything wrong here, but there are just a few things I'd like to point out.

Before I do that, check IE's JavaScript console, my guess is an earlier script has an error, and that's why this one never gets run.

Instead of $(document).ready(function(){});, you can actually just do $(function(){}). it shouldn't make a difference, though.

Also, please don't pass strings to setTimeout (they get eval'd in the global scope), pass a function.

setTimeout(initialize, 200);

Also, are you sure you declared $jquery (shouldn't it be $.error)?

<script type="text/javascript">
   $(function() {
       initialize();
   });
   function checkDivLoaded() {
       if ($('#footer').length == 0){
          $jquery.error( 'not ready' );
       }
   }
   function initialize() {
       try{
           checkDivLoaded();
           //...more code here
       } catch (err) {
           setTimeout(initialize, 200);
       }
   }
</script>

EDIT: If you're using IE8 or lower, it doesn't add console unless the debugger is open (I wish whoever thought that was a good idea has been fired). If one of your includes uses console.log it would be undefined, thus stopping all script execution.

Try adding this to the top of the page:

window.console = window.console || {log:function(){}};

It will make a "fake" console object, so that console.log will be defined.

回答2:

Just had the same problem. Nearly broken my brain trying to figure out what's wrong.

Turned to be very simple - some code that's executed earlier used console.log(...), but it isn't defined in IE unless the dev tools are enabled.

The fix is simple - either remove/comment console.log or add this code to one of your files before the first console.log is used:

if (typeof console === "undefined"){
    console={};
    console.log = function(){};
}

回答3:

Try putting your

$(document).ready(function...

at the bottom of the code. It could be that IE has not parsed the initialize() code prior to the ready function being called.

回答4:

Write below two lines at top of the page.

    window.console = window.console || {log:function(){}};
    if (typeof console === "undefined"){
        console={};
        console.log = function(){};
    }

This solved my problem

回答5:

don't know where I've found this solution, but this does work for my IE10.

An example from my project:

var windowOnload = window.onload || function() {
                $('.toInitiate')[0].click();
                 $('a').click(function() {

                        if(this.className.indexOf("collapse") == -1)
                        {
                            $('.active').removeClass('active');
                            $(this).parent().addClass('active');
                            var className = $(this).parent().attr('class');
                        }
                    });

            };

            window.onload = function() {
                windowOnload(); 
            };

These codes are executed after loading all the html contents.

回答6:

This worked for me. I Replaced

$(document).ready(function...

with

jQuery(document).ready(function...

回答7:

Using (function($) {})(jQuery); fixed the issue for me.

(function($) {
  // body code
})(jQuery);