jQuery load () и таблица стилей не работает? - PullRequest
Новая
       12

jQuery load () и таблица стилей не работает?

4 голосов
/ 20 августа 2010

Я загружаю файл в div с помощью функции load (), но после загрузки данных - стили для него не хотят работать.

Например:

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;
}

После того, как я щелкну ссылку «a», контент загружается в #Display div, затем он отлично отображается, но заголовок заголовка не красный и абзац содержимого не зеленый .

Я считаю, что это поведение по умолчанию, потому что когда сайт загружается сначала, таких элементов нет, и я загружаю их динамически с помощью jQuery. Есть ли способ их ленивой загрузки и обновления таблицы стилей в фоновом режиме? Или какие-то другие уловки, чтобы помочь мне?

Большое спасибо!

1 Ответ

2 голосов
/ 20 августа 2010

Указана ли таблица стилей в элементе заголовка загружаемого файла? Если это так, он не будет загружен load, потому что load автоматически фильтрует все, кроме содержимого элемента body. Если вы включите таблицу стилей в документ, из которого запускается скрипт и в который будет загружен другой документ, он должен работать нормально. 

<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>
...