ansaurus

Question

Answer 1

A:

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

Here Be Wolves 2010-01-09 20:12:19

Removing the quotes around an attribute value that has a `.` in it will break that selector.

zombat 2010-01-09 20:30:24

Answer 2

+1 A:

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.

Dan 2010-01-09 20:15:14

Answer 3

+3 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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.

zombat 2010-01-09 20:58:12

Sheer brilliance, thanks for putting in so much work.

usertest 2010-01-09 21:04:16

Drat, I was going to suggest `$` selector as well. Good work, +1.

BalusC 2010-01-09 21:05:39

Np, I use JQuery for my job, so I actually had a vested interest in figuring it out. I didn't find much on Google about it, I'm wondering now whether it's worth submitting to the JQuery folks for perusal.

zombat 2010-01-09 21:19:56

I think thats a good idea

usertest 2010-01-09 21:26:19

ansaurus

tags:

views:

answers:

jquery compatibility problem

related questions