Context Navigation

← Previous Ticket
Next Ticket →

#8574 closed bug (invalid)

append() to head not working in 1.5

Reported by:	[email protected]…	Owned by:	[email protected]…
Priority:	low	Milestone:	1.next
Component:	unfiled	Version:	1.5.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

Appending additional css file does not work in IE in jquery 1.5. It does work in 1.4 (in FF it works ok with jquery 1.4 and 1.5):

$j("head").append("<link href='some.css' type='text/css' rel='stylesheet' />");

Simple test code:

<html>
<head>
  <link href="blue.css" type="text/css" rel="stylesheet" />

  <!-- JQuery -->
  <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  <script>
    var $j = jQuery.noConflict();

    $j("head").append("<link id='test1' href='red.css' type='text/css' rel='stylesheet' />");
  </script>
</head>
<body>
        <div id="a">Test string</div>
</body>
</html>

blue.css:

#a {
	background-color: #FF0000;
}

red.css:

#a {
	background-color: #0000FF;
}

In IE and jquery 1.5, DIV's background remains blue, with 1.4. it is red (as shoud be).

Change History (13)

comment:1 Changed 12 years ago by Yomodo

Although I guess the above should work, I took a different approach:

In my .html I've added:

<link id="css-Customer" rel="stylesheet" type="text/css" href=""/>

Then later on in my code, point to a .css file:

$("#css-Customer").attr("href", css);

comment:2 Changed 12 years ago by anonymous

Yes, true, this works. But it can also be rather annoying if you don't know how many additional css files you need to load.

I have here a page that needs to load 0, 1 or 2 additional css files. Having all the time two empty link tags waiting just for that 1% of users that need those two additional css files, seems excessive.

It would be much nicer to just add them to head when necessary.

Thanks for the good tip though!

comment:3 Changed 12 years ago by dmethvin

#8607 is a duplicate of this ticket.

comment:4 Changed 12 years ago by dmethvin

Owner:	set to [email protected]…
Status:	new → pending

You are trying to append to the head before it is closed. Can you create a test case that uses a .ready() to do the append?

comment:5 Changed 12 years ago by Timmy Willison

http://jsfiddle.net/timmywil/KTAcx/ works fine in IE

comment:6 Changed 12 years ago by addyosmani

Keywords:	needsdocs added
Priority:	undecided → low
Resolution:	→ invalid
Status:	pending → closed

Please see here for a correct test case from timmywil: http://jsfiddle.net/timmywil/KTAcx/. This is working fine in IE and we probably just need to improve the documentation around the behavior. Adding needsdocs.

comment:7 Changed 12 years ago by danheberden

fwiw a test case with visual proof: http://jsfiddle.net/danheberden/mmd3Y/2/

comment:8 follow-ups: 11 12 Changed 12 years ago by [email protected]…

Hey, wait, I narrowed it a bit...

IE doesn't work if you link css file locally. ie: $('head').append("<link href='red.css' type='text/css' rel='stylesheet' />");

but renders page properly and adds css if you use the whole URL address: $('head').append("<link href='http://mydomain.com/red.css' type='text/css' rel='stylesheet' />");

can you reopen this ticket?

comment:9 Changed 12 years ago by [email protected]…

Btw, placing append() into .ready() makes no difference.

comment:10 Changed 12 years ago by netrunner

I still think something should be done about this, since the behavior has been inconsistent across jquery versions. See Ticket #8607

comment:11 in reply to: 8 Changed 12 years ago by netrunner

Replying to [email protected]…:

Hey, wait, I narrowed it a bit...

IE doesn't work if you link css file locally. ie: $('head').append("<link href='red.css' type='text/css' rel='stylesheet' />");

but renders page properly and adds css if you use the whole URL address: $('head').append("<link href='http://mydomain.com/red.css' type='text/css' rel='stylesheet' />");

can you reopen this ticket?

Version 0, edited 12 years ago by netrunner (next)

comment:12 in reply to: 8 Changed 12 years ago by anonymous