Geek Answers Handbook

JQuery load () and stylesheet not working?

I load the file into a div with the load () function, but after loading the data - the styles for it do not want to work.

For instance:

index.html

$("a ").click( function(e) { e.preventDefault(); $("#Display").load('file.html'); $("#Display").show(); });

file.html:

 <h1 id="title">Item number #1</h1> <p id="content">Lorem ipsum like text...</p>

style.css:

 #title { color: red; } #content { color: green; }

After I click the “a” link, the content is loaded into the #Display div, then it will display fine, but the title of the title does not blush, and the paragraph of the content is not green .

I believe that the default behavior is because when the site first loads, there are no such elements, and I load them dynamically using jQuery. Is there a way to lazily load them and somehow update the stylesheet in the background? Or any other tricks that will help me?

Thanks a lot!

+4
source share
1 answer

Is a stylesheet specified in the head element of the uploaded file? If so, it will not load load , because load silently filters everything except the contents of the body element. If you include a stylesheet in the document from which the script is launched and into which another document will be loaded, it should work fine.

 <head> <link rel="stylesheet" type="text/css" href="styles.css" media="screen /> ... <script type="text/javascript" src="...jquery.js"></script> <script type="text/javascript"> $(function() { $("a").click( function(e) { $("#Display").load('file.html'); $("#Display").show(); return false; }); }); </script> </head> <body> <p><a href="#">Load Content</a></p> <div id="Display"></div> </body>
+2
source

More articles:


All Articles