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.

console.log('hi ie');

jQuery(document).ready(function () {
    setTimeout(function () {
        jQuery(".controlApply").on("click", function (event) {
            pollVisibility();
            console.log('after poll');
        });
    }, 1000);
});
//This method checks is a specific div is shown. Dirty way to check if a report is being processed
function pollVisibility() {
    console.log('poll');
    if (microstrategy.bones.rwb_viewer.objectID == '7647F4F611E2B39B923E0080EF058C78') {
        if (!jQuery('#divWaitBox').attr('style')) {
            console.log('divWaitBox');
            //wait did not appear
            microstrategy.getViewerBone().commands.exec('refresh');
        } else if (jQuery('#divWaitBox').attr('style').indexOf('hidden') != -1) {
            console.log('hidden');
            microstrategy.getViewerBone().commands.exec('refresh');
        } else {
            console.log('other');
            setTimeout(pollVisibility, 800);
        }
    } else {}
}

The console.log never is called however the document.ready seems to work in IE

The doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

If its wrong, I cannot change it. This is an extension of the MicroStrategy BI application.

Stupid question but, do you have the console open? otherwise the console.log won't work. Make sure you reload the page after you open the console. — Kevin B, Dec 12 '13 at 22:24
Yeah I was testing with console opened. It logs my 'console.log('ie sucks') at the top of js file just fine... — user3032973, Dec 12 '13 at 22:28
I just noticed this app is using /*! jQuery v1.10.2 ...... Good call, let me try latest. — user3032973, Dec 12 '13 at 22:31
@user3032973: That's about as close as you'll get to the latest without breaking IE8. If you upgrade to `jQuery 2.0.2`, IE8 won't work. — cookie monster, Dec 12 '13 at 22:31
dumb question, but you DO have an element with the class="class" right? — Lenny, Dec 12 '13 at 22:32
This is too simple to be messing up with no error messages so maybe you don't have the basic setup correct? It should be like this: http://jsfiddle.net/X8wtT/ — Lenny, Dec 12 '13 at 22:34
@RocketHazmat: `.bind()` isn't deprecated. It's just a recommendation to use `.on()`. — cookie monster, Dec 12 '13 at 22:34
@user3032973: You can't use jQuery 2.x with IE 8 or lower. If you want to support IE 8, you need to use 1.x. — gen_Eric, Dec 12 '13 at 22:35
Works for me in IE8: http://jsfiddle.net/4r6T8/show (edit at http://jsfiddle.net/4r6T8) P.S. What `poll();` do? — gen_Eric, Dec 12 '13 at 22:38

MonkeyZeus · Accepted Answer · 2013-12-12T22:38:58.993

0

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??
    });
});

edited Dec 12 '13 at 22:38

answered Dec 12 '13 at 22:32

MonkeyZeus

20,375
4
36
77

Nah, any version that supports `.on` will also support `.bind`. ;-) Using `.on` is preferred, but `.bind()` isn't deprecated. – cookie monster Dec 12 '13 at 22:33
@cookiemonster it hasn't been removed yet? – MonkeyZeus Dec 12 '13 at 22:33
@cookiemonster I guess I should read the docs more often `As of jQuery 1.7, the .on() method is the` **preferred** `method` – MonkeyZeus Dec 12 '13 at 22:35
Yeah, I've not heard of any plans to deprecate or remove it at this point. Still good advice to use `.on()`. – cookie monster Dec 12 '13 at 22:35
Hey OP, what does `poll();` do? – MonkeyZeus Dec 12 '13 at 22:39
Hey sorry was at the gym. I am testing now with on. Will let you know. – user3032973 Dec 13 '13 at 03:03
poll() basically checks for a div so I will know if the application is done processing a report. – user3032973 Dec 13 '13 at 03:18
Adding a breakpoint and using /*! jQuery v1.10.2 the pollVisibility() is never hit. – user3032973 Dec 13 '13 at 03:24
Is it possible that the div is not rendered when page is ready? Can I put a delay on the .on() function? – user3032973 Dec 13 '13 at 03:35
.on() is preferred as it binds to the specified element even if it is created after the document is ready (eg generated elements). It was 'born' out of the .live() event if I remember correctly. – Klaas Leussink Dec 13 '13 at 13:16
@c_kick `.on()` will not be able to bind itself to an element that is created on the page if you do not provide the correct specificity with a static parent -> dynamic child relationship. – MonkeyZeus Dec 13 '13 at 13:25
@c_kick Check out this [JSfiddle](http://jsfiddle.net/y44NG/). Clicking Article 4 will do nothing unless you comment the first code block and uncomment the second. – MonkeyZeus Dec 13 '13 at 13:33
You're doing it different (you're not applying .on() as I do); you should bind the .on event to the document, not the element you are targetting. See my fork: http://jsfiddle.net/c_kick/5fUhe/ – Klaas Leussink Dec 13 '13 at 13:37
And here's the same example, showing that elements created after docready (press the 'dupe!' button) will work as well: http://jsfiddle.net/c_kick/K43Q3/ – Klaas Leussink Dec 13 '13 at 13:40
@c_kick Sorry about that, I did not realize you were binding it to the document. Your method does work and there is nothing wrong with it in terms of syntax nor compatibility but I just want to state that using the `document` as the parent is not the most efficient way because jQuery will potentially have to traverse so many children to find the `.article`. It is highly recommended to get as close to the child element as possible, preferably by giving the parent element an ID. – MonkeyZeus Dec 13 '13 at 13:43
Agreed! I'd love to see some benchmarks on this, in my experience it is very fast (even with a very large and complex DOM) – Klaas Leussink Dec 13 '13 at 13:45
@c_kick It all comes down to what browsers you are trying to support and the single-threaded prowess of the CPU running that browser. You can check out [JSperf](http://jsperf.com/) because they run tests against a slew of browsers and browser versions. jQuery really shines when it comes to compatibility because if a browser doesn't support something natively then jQuery uses the next-best method. I am looking at IE8 and it's lack of [getElementsByClassName](http://stackoverflow.com/questions/9568969/getelementsbyclassname-ie8-object-doesnt-support-this-property-or-method) – MonkeyZeus Dec 13 '13 at 13:57
Hey guys I appreciate the help. All of your solutions seem to be correct. Its hard to tell what the problem is because this is an extension of a very large application and there is a ton of JS/ajax being executed when the page is rendered. Cant get .on to work for some reason. Works perfectly in chrome/ff:( – user3032973 Dec 13 '13 at 14:16
IF I call 'jQuery(".controlApply").on("click", function (event) { pollVisibility(); });' After the page is renderd in the console everything works great.... – user3032973 Dec 13 '13 at 14:30
The content may be added using ajax, would the solution change if this was the case? – user3032973 Dec 13 '13 at 19:18

score 0 · Answer 2 · answered Dec 13 '13 at 22:09

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();
       });
}

score 0 · Answer 3 · answered Nov 30 '18 at 19:56

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. :(

jquery IE8/9/10 Bind to click not working

3 Answers3

Linked

Related