JQuery not working in IE 9.0.8, but works with dev tools open

Question

The following works in all browsers except IE 9.0.8. It loads a survey form within div with an ajax request.

$('.tab-content').on('click', '.show_survey_form', function(e) {
  e.preventDefault()
  target = $(this).attr("data-target")
  my_href = $(this).attr("href")
  console.log("load: " + target + "   target: " + my_href)
  // load: #survey_response_form_33   target: /surveys/33/survey_responses/edit_multiple

  // Don't make a request unless the form is opening.
  if ($(this).hasClass('collapsed')) {
    console.log("Making request!")
    //$(target).load(my_href)
    $(this).html(closeSurveyForm) // Just changes the language on the button
  } else {
    $(this).html(respondToSurvey) // Just changes the language on the button
  }
}

The .load is commented out during debugging. IE seems to have a problem using .hasClass in this context. It's used elsewhere with no issue.

The really odd part is that the moment I open the dev tools window, it starts working. It consistently doesn't work before then, and consistently works after hitting F12.

Other issues have said the hasClass method doesn't work when the class contains a \r char but that isn't the case here. I'm using jQuery 1.8.3.

Update: Changing the href to "#" and writing the URL into data-load had no effect. Still works in all browsers except IE 9.0.8.

Answer 1

This has nothing to do with jQuery or hasClass(). It is entirely down to your use of console.log().

It is important to know that IE does not define the console object until the F12 dev tools window has been opened.

This means that before you open it, the console calls will be throwing javascript "object undefined" errors. This will make it appear that the code around it isn't working, but it's really just the fact that the console object is missing.

You may have similar effects in other older browsers, but most current browser versions do not do this -- they define the console object immediately, regardless of whether the dev tools is open or not. IE is the only exception.

You can get around this by either (a) not using console unless you are actually debugging and have the dev tools open, or (b) adding an if(console) check to all your console calls. This will prevent the error.

Further information here: Why does JavaScript only work after opening developer tools in IE once?