Home/ Questions/Q 543427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:33:01+00:00

Why does the following work in firefox but not in IE? $(#bCompare).bind(click, function(e){ $(img[src=’s1.gif’]).each(function

  • 0

Why does the following work in firefox but not in IE?

            $("#bCompare").bind("click", function(e){
                $("img[src='s1.gif']").each(function (i) {
                    $("#cSelected").append("<div class='cHolder'></div>");
                });
            });

UPDATE 1: A commenter mentioned I haven’t put in enough information, although i’m not sure what more is needed. The above code checks for the number of images with the src s1.gif. It then runs a loop inserting a div of the class cHolder into the div cSelected. The number cHolders added depends on the number of s1.gif images.

There are no error messages in either browser. Firefox 3.5 and IE 7

UPDATE 2: I’ve narrowed it down to a problem in the “each” method. Outside the loop it works fine in both. Is there any way to get around this? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’ve run into is actually really interesting. I started with your code, and the results are quite confusing. The src='s1.gif' selector works fine in Firefox and IE8, but not in IE7 or IE6. I ended up with a test document to figure out this selector:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
</script>

<img id="foo" src="foo.png"/>

<script type="text/javascript">
    alert('# images: ' + $('img').length + ', ' + 'Src: "' + $('#foo').attr('src') + '", Num of imgs selected by src: ' + $("img[src='foo.png']").length);
</script>
</body>
</html>

    So assuming you have an image file called “foo.png” in the same directory as this test document, you get the following alerts in FF3.5, IE8, IE7, and IE6 respectively:

    # images: 1, "foo.png", Num of images selected by src: 1
# images: 1, "foo.png", Num of images selected by src: 1
# images: 1, "foo.png", Num of images selected by src: 0
# images: 1, "foo.png", Num of images selected by src: 0

    So the selector $("img[src='foo.png']") clearly doesn’t find the image properly in IE6 and 7, despite the src being reported correctly by the alert. If you change the selector src to the full path to the image ($("img[src='http://whatever/foo.png']")), you get the opposite results. It’s found in IE6/7, but not in IE8 or FF.

    Very weird. The src must be represented differently in the DOM somehow in these browsers, but not accounted for properly by JQuery.

    Gaby actually posted an answer that was on the right track, but then he deleted it. If you use a selector with a $ sign, like img[src$='foo.png'], it appears to work in all 4 of these browsers, as it matches the foo.png on the end of the attribute value.

    I would suggest you go with that method.

    • 0