jQuery IE Conflict

Forum Moderators: open

Message Too Old, No Replies

jQuery IE Conflict

whyyi

4:29 pm on Aug 26, 2010 (gmt 0)

jQuery newbie here. This has to be something simple that I'm not doing. But this seems to work everywhere but in IE (specifically 7). Essentially I'm just trying to put a border around the third div or even the second div for that matter. While it works in every other browser it doesn't seem to work in IE. On a side note anyone know why when I put the script tag in the head it doesn't work period. Thanks, any help is greatly appreciated!


<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="amenities_list"><ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>

 </ul></div>
 <div id="amenities_list"><ul>
 <li>Sam</li>
 </ul></div>

 <div id="amenities_list"><ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>

 <li>David</li>
 </ul></div>
<script type="text/javascript">
$("#amenities_list:nth-child(3)").css("border","1px solid blue");
</script>

</body>
</html>

bhukkel

5:09 pm on Aug 26, 2010 (gmt 0)

You have to put it in the document ready function..like this:

<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>

in your code there is a change that the page is not loaded full and the jquery code doesnt work.

Fotiman

5:15 pm on Aug 26, 2010 (gmt 0)

Just to clarify what bhukkel wrote, your JavaScript code was firing before the elements existed in the DOM if you put that script in the head. So you need to call that code when the document is ready. All three of the following syntaxes are equivalent for calling a handler when the document is ready:

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

Even though the last one is the smallest, I personally prefer the first one for clarity.


$(document).ready(function () {
  $("#amenities_list:nth-child(3)").css("border","1px solid blue");
});

Also note, for performance reasons, it's best to include scripts at the end of your page just before the closing </body> tag, not in the head.

whyyi

5:55 pm on Aug 26, 2010 (gmt 0)

Thanks for the help. But my main problem is why is it not working in IE. I understand the document ready function. In every other browser works perfect, but IE's not even showing the blue border.

Please help, thanks again!

Fotiman

6:32 pm on Aug 26, 2010 (gmt 0)

I took a closer look and now I see the real problem. You have multiple elements with the same id value ("amenities_list"). This is invalid. id values MUST be unique. You could change those to class names instead and then change your selector to begin with . instead of # and it will work.

whyyi

1:19 am on Aug 28, 2010 (gmt 0)

Thank you so much! Changing the selector to a class worked liked a charm. Thanks again for the help, it is very much appreciated!