javascript - 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:

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!

Answer 1

其他一些代码或插件可能正在加载另一个 JavaScript 库，而调用代码可能无法处理jQuery.noConflict(). 这已经发生在我身上好几次了。同时，为了使您的代码正常工作，您还可以执行以下操作：

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

Answer 2

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

Answer 3

当您使用 jQuery.each 方法时，“this”（在回调中）指向 DOM 元素，而不是 jQuery 包装器。如下，您必须将“this”包装在 jQuery 对象中：

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

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