Jquery应用css来加载div

时间:2009-09-10 23:33:15

标签: jquery css load live

我在使用load()函数动态地将css应用于加载的div时遇到问题。找到正在加载的html,并插入它,我可以使用close命令。但是我试图申请的CSS没有注册。一切似乎工作正常减去动态css。我想我可能有错误或错误的功能:

Jquery的:

$(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();
        });
});

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

aeffect.html:

<div class="projectPopup" id="aeffect">
  <a class="close">Close &times;</a>
  <p class="description">Description</p>
</div>

2 个答案:

答案 0 :(得分:2)

您正在错误的时间设置CSS属性。您需要做的是使用load()方法的回调函数在加载完成后应用CSS属性。

 $("#popupContainer").load(htmlName + ".html", {}, function(){
     $(".projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});
 });

答案 1 :(得分:2)

将apply 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();
        });
});