jQuery not working in IE8 and higher

Question

using jQuery 1.9.1

The div acts like a container for an image. It has a css styled close icon. When user clicks on the close icon, it removes the image inside the div and also hides the close icon.

These 2 JS functions work fine in chrome & firefox but not in IE8 & IE11. What can be done here.

HTML:

<div>
 <a class="closeCompare" rel="237" style="display:block"></a>
 <img class="imgCompare" src="pics/1.png" style="display:block"></img>
</div>

JS:

$(document).ready(function(){
RemoveDefaultImage(); //hide the ugly X icon that shows up when there is no image
ShowHideRemoveIcon(); //hide the close icon
})

function RemoveDefaultImage() {       
    $(".imgCompare").each(function () {
        if (($(this).attr('src').length) == 0) {
            $(this).css("display", "none");
        }
        else {
            $(this).css("display", "block");
        }
    })
}

function ShowHideRemoveIcon() {        
    $(".closeCompare").each(function () {
        if ($(this).attr('rel') == 0) {
            $(this).css("display", "none");
        }
        else {
            $(this).css("display", "block");
        }
    })
}

These functions fire on page load and also on a click event

Please explain what's happening in IE. Any error in console? — Karl-André Gagnon, Jan 08 '15 at 13:49
If you put an alert() in the document.ready() does it fire in IE? — Liath, Jan 08 '15 at 13:56
@Karl. Nothing happens actually. Both the image and the icon stay there and not hide. — sukesh, Jan 08 '15 at 14:07
For me, your code is behaving exactly the same in Google Chrome as IE11: http://jsfiddle.net/toy6wnfy/5/. The question makes no sense, what you are saying it is doing (some click functionality) and what the code is doing (hiding based on empty attributes) are two completely different things. — Jamie Barker, Jan 08 '15 at 14:45
Yes, you are right. The events fire on page load and also on click. I just put only the function part. But the main prob remains the same, not working in ie but fine in chrome and firefox — sukesh, Jan 09 '15 at 04:39
@Qwerty I think your logic is flawed. What is your exact expected outcome? can you create a http://www.jsfiddle.net that is supposedly working in Chrome/Firefox? — Jamie Barker, Jan 09 '15 at 11:47

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

This potentially could fix the problem, but if not you should do it anyway. Change:

$(document).ready

to

$(window).load

$(document).ready doesn't wait for images to load: What is the difference between $(window).load and $(document).ready?

edited May 23 '17 at 12:14

Community

1
1

answered Jan 08 '15 at 14:06

Jamie Barker

8,145
3
29
64

score 1 · Answer 2 · answered Jan 09 '15 at 04:54

I think you $(document).ready(function (){ }); is not fired when first time page load. So it is a problem occurred while you are using multiple js libraries on the same page. So you can use only this code.

Code:

jQuery.noConflict();
$(document).ready(function (){ });

jQuery not working in IE8 and higher

2 Answers2