JQuery применяет CSS для загрузки div
Вопрос
У меня возникла проблема с динамическим применением CSS к загруженному div с помощью load()
функция.Загружаемый HTML-код найден и вставлен, и я могу использовать команду закрытия.Однако CSS, который я пытаюсь применить, не регистрируется.Кажется, все работает нормально, за исключением динамического CSS.Я думаю, что у меня здесь что-то не так или неправильная функция:
Jзапрос:
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
htmlName = $(this).find("img").attr("name");
$("#popupContainer").load(htmlName + ".html");
});
//Apply CSS
$(".projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});
//Close property
$("a.close").live("click", function(){
$("#popupContainer").empty();
});
});
тест.php:
<div id="content">
<div class="projectThumb">
<img src="/img/aeffect_button_static.gif" name="aeffect" />
<p class="title">title</p>
</div>
</div>
<div id="popupContainer"></div>
эффект.html:
<div class="projectPopup" id="aeffect">
<a class="close">Close ×</a>
<p class="description">Description</p>
</div>
Решение
Вы устанавливаете свойства CSS в неправильное время.Что вам нужно сделать, так это применить свойства CSS после завершения загрузки, используя функцию обратного вызова метода load().
$("#popupContainer").load(htmlName + ".html", {}, function(){
$(".projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});
});
Другие советы
Поместите применить CSS в обратный вызов для .load().
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
htmlName = $(this).find("img").attr("name");
$("#popupContainer").load(htmlName + ".html", null, function(){
//Apply CSS
$("projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});
});
//Close property
$("a.close").live("click", function(){
$("#popupContainer").empty();
});
});
Не связан с StackOverflow