jQuery doesn't work in Internet Explorer 8 ("this" returns DOM instead of jq)

Question

I am facing a strange problem and can't find any solution.

jQuery (any version, from 1.7.* to 1.10.*) fails in Internet Explorer 8. All plugins (from bootstrap) and the jQuery library fall with an error:

Object doesn't support this property or method

Screenshot from debugger:

screenshot from debugger

Digging in plugins code, like this:

$.fn.alert = function (option) {
    return this.each(function () {
        //...
    })
}

shows the problem: this keyword points to HTMLDomObject, not on a jQuery object. What can cause such a weird error?

Only in Internet Explorer 8!

jquery version used? if it is jquery 2.x then IE < 9 is not supported — Arun P Johny, Aug 13 '13 at 11:17
Evernote is inaccessible to unauthenticated users, please upload your screenshot somewhere else or post the relevant details as plaintext. — Bergi, Aug 13 '13 at 11:21
@AustinBrunkhorst, not in jquery core and all bootstrap plugins, I think :) — Terion, Aug 13 '13 at 11:28
@AustinBrunkhorst - No, this is code for a plugin, and within the plugin `this` should refer to the jQuery object see: http://learn.jquery.com/plugins/basic-plugin-creation/ — Jamiec, Aug 13 '13 at 11:40
Could you please check whether any other browser add-ons are installed there. In past I faced similar kind of issue in which Pricepeep browser add-on was causing the issue as it was loading its own jQuery version and was not taking care of .noConflict, hence was eating up my jQuery loading in `` section. — vijayP, Aug 13 '13 at 13:18
Have you reached out to the jquery support forum? http://forum.jquery.com/ — SheetJS, Aug 13 '13 at 13:28
Does the code work in *other* browsers? What does the code look like that triggers this error? Can we get more info or an example that shows the error? Because jQuery plugins work just fine in IE8. — gen_Eric, Aug 13 '13 at 21:45
@RocketHazmat, yeap, it works great in all other browsers, including ie9 — Terion, Aug 14 '13 at 16:06
Guys, I've found code, that was breaking everything. Updated the post and posted answer — Terion, Aug 14 '13 at 16:43
@ВладимирКорнилов Please, post it as an actual _answer_. Do not write it in the question under a heading "ANSWER" as that makes no sense. You've been here for almost two years, so you should know how it works by now. — Lightness Races in Orbit, Aug 14 '13 at 18:26
@LightnessRacesinOrbit I've posted but also added to question. Thanx for remark — Terion, Aug 15 '13 at 10:15
@ВладимирКорнилов: Please don't add it to the question. And mark your answer as _accepted_ if it reflects the solution you took. Thanks. — Lightness Races in Orbit, Aug 15 '13 at 10:26

score 0 · Answer 1 · edited Aug 14 '13 at 20:57

0

Some other code or plugin may be loading another JavaScript library and that calling code may not be taking care of jQuery.noConflict(). This has happened to me several times. In the meantime, to make your code work, you can also do the following:

//If 'this' is pointing to a HTMLDomObject
var obj = $(this)

edited Aug 14 '13 at 20:57

Peter Mortensen

30,738
21
105
131

answered Aug 14 '13 at 11:15

anishdeena

71
4

score 0 · Accepted Answer · edited Aug 14 '13 at 20:58

0

I've found a piece of code, that caused this problem. I still don't understand, how it could break all jQuery in such way and why it was breaking at all (again, it worked perfectly in all browsers but Internet Explorer 8), but changing the for in iterator to $.each() made errors to disappear.

for (var i in $postsPortions) {
    var $p = $($postsPortions.get(i));
    var offset = $p.offset();
    if (offset && Math.abs(offset.top - scrollTop) < 100) {
        var year = $p.data('year');
        var season = $p.data('season');
        window.location.hash = year + '/' + season;
        $milestones.removeClass('active');
        $milestones.filter('.year_' + year + '.season_' + season).addClass('active');
        return;
    }
    if (i >= ($postsPortions.length - 1)) return;
}

edited Aug 14 '13 at 20:58

Peter Mortensen

30,738
21
105
131

answered Aug 14 '13 at 16:45

Terion

2,396
3
28
42

1

If your problem was because of your `for in` loop, the you should look into `hasOwnProperty()`. The values `for in` loops grab can be unintuitive, and _can_ change across browsers. – Jordan Aug 14 '13 at 16:49
5

Have a look at [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea) maybe. If you had posted that code right away we could've helped you. – Bergi Aug 14 '13 at 18:33
@Bergi I have about 2k lines of code in this proj so finding out what code to post was a problem ) Thanx for links. But I still don't understand how this peace of code could totally break everything in the way described in the question (why it changed the behaviour of jQ library) – Terion Aug 15 '13 at 10:20

score -1 · Answer 3 · answered Aug 13 '13 at 21:12

-1

When you use jQuery.each method, "this" (in callback) points to DOM element, not to jQuery wrapper. As follows, you have to wrap "this" in jQuery object:

$elements.each(function(){
    var $this = $(this);

    // do something with $this ...
});

answered Aug 13 '13 at 21:12

bonbonez

6,658
2
15
16

1

But when you make a jQuery plugin, `this` is the jQuery object the plugin was called on. – gen_Eric Aug 13 '13 at 21:44

jQuery doesn't work in Internet Explorer 8 ("this" returns DOM instead of jq)

3 Answers3