jQuery load() and stylesheet not working?_问答_开发者

jQuery load() and stylesheet not working?

开发者 https://www.devze.com 2023-01-12 22:22 出处：网络

I\'m loading a file into a div with load() function, but after I load the data - the styles for it doesn\'t want to work.

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

For example:

index.html:

 $("a ").click(

     fu开发者_如何转开发nction(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 "a" link, the content is loaded to #Display div, then it's perfectly displayed, but the title header is not red and content paragraph is not green.

I believe that's a default behavior because when site loads at first there are no such elements and I'm loading them dynamically with jQuery. Is there a way to lazy load them and refresh style-sheet in the background somehow? Or any other tricks to help me?

Thanks a lot!

Is the stylesheet referenced in the head element of the file being loaded? If so, it won't be loaded by load because load silently filters everything but the content of the body element. If you include the stylesheet in the document from which the script runs and into which the other document will be loaded, it should work just 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>