I am using AngularJS framework and I am using 'hasClass' inside jquery in order to have dropdown on mouse over. It is working fine in chrome and FF but in IE, it gives an error that "Unable to get Property hasClass of undefined or null reference" when I click on button and navigate to another page. This error does not show up every time but it appears often and in IE only. Similarly, sometimes instead of 'hasClass', it throws 'height' as undefined or null reference. Here is the code:
(function ($, window, delay) {
var theTimer = 0;
var theElement = null;
var theLastPosition = { x: 0, y: 0 };
$('[data-toggle]')
.closest('li')
.on('mouseenter', function (inEvent) {
if (theElement) theElement.removeClass('open');
window.clearTimeout(theTimer);
theElement = $(this);
theTimer = window.setTimeout(function () {
theElement.addClass('open');
}, delay);
})
.on('mousemove', function (inEvent) {
if (Math.abs(theLastPosition.x - inEvent.ScreenX) > 4 ||
Math.abs(theLastPosition.y - inEvent.ScreenY) > 4) {
theLastPosition.x = inEvent.ScreenX;
theLastPosition.y = inEvent.ScreenY;
return;
}
if (theElement.hasClass('open')) return;
window.clearTimeout(theTimer);
theTimer = window.setTimeout(function () {
theElement.addClass('open');
}, delay);
})
.on('mouseleave', function (inEvent) {
window.clearTimeout(theTimer);
theElement = $(this);
theTimer = window.setTimeout(function () {
theElement.removeClass('open');
}, delay);
});
})(jQuery, window, 50); // 50 is the delay in milliseconds
Any suggestions? Thanks.