CODEWITHSUNDEEP
jqueryinternet-explorerfirefox
usertest
usertest

Reputation: 27648

jquery compatibility problem

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.

Upvotes: 2

Views: 172

Answers (3)

zombat
zombat

Reputation: 94237

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.

Upvotes: 3

Dan
Dan

Reputation: 11089

Try to narrow down the problem a little. It could be one of (at least) three things:

  • the handler doesn't bind or never gets called. Add an alert in your outer function to find out.
  • The img selector is not giving you the images you want. Add another alert or put out a counter somewhere.
  • The div is really being created but you don't see it due to, perhaps, something unexpected happening with how IE handles your cHolder class.

Without a complete example to look at, that's probably about the best we can do.

Upvotes: 1

jrharshath
jrharshath

Reputation: 26583

Now, I'm not entirely sure, but...

...try: 

$("img[src=s1.gif]")

If not, post the output of

alert( $("img[src='s1.gif']").length );

and 

alert( $("img[src='s1.gif']").length );

when run in firefox and IE

Upvotes: 0

Related Questions