jquery IE8/9/10 Bind to click not working

Question

Facing an issue with IE and jquery. The code is working in all other browsers but breaks when used in IE. Fairly simple implementation. But I am javascript novice.

Answer 1

Depending on your jQuery version, your issue is likely the .bind() which should be performed with .on() like this

HTML

<div class="class" style="height:40px; width:40px; background-color:#ff0000;"></div>

jQuery

$(document).ready(function () {
    $(".class").on("click", function (event) {
        console.log('We clicked!');
        poll(); // <-- wtf does this do exactly??
    });
});

Answer 2

The problem with this javascript is that it was attempting to alter a page which is being built with some ajax framework. Its the MicroStrategy BI application. if I put a break point after document ready there is no content renderd on the page.

The solutions on this page helped me get here which should cover if/ff/chrome

jQuery( document ).ready(function() {
    setTimeout(test, 1000);
      jQuery(".controlApply").on("click", function (event) {
          pollVisibility();
      });
});



function test(){
       jQuery('.mstrTransform').on('click', '.controlApply', function(){
           pollVisibility();
       });
}

Answer 3

I just have been having a night mare with this exact same issue in IE 11. I was trying to jQuery append() information to a div element. While running the console, the action intermittently worked. If console was closed, nothing happened, it was as if the script was completely ignored. This included an alert statement.

By commenting out the console.log statements IE 11 behaved as expected (which still feels incorrect). I ran the same script in MS Edge and Chrome with the console.logs and everything ran as expected. What I have learned is that console.log is the culprit. This is a common thing between our codes and I am working on IE 11 and the issue still persists. :(