JQuery Anwendung css div laden

Question

ich habe ein Problem CSS dynamisch an einem geladenen div Anlegen der load() Funktion. Der HTML geladen wird gefunden, und es wird eingesetzt, und ich kann ein Schließen-Befehl verwenden. Allerdings ist die CSS-I anzuwenden versuchen nicht registriert werden. Alles scheint in Ordnung minus die dynamische CSS zu arbeiten. Ich denke, dass ich etwas falsch oder eine falsche Funktion hier haben:

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>

Answer 1

Sie setzen die CSS-Eigenschaften zur falschen Zeit. Was Sie tun müssen, ist die CSS-Eigenschaften gelten, nachdem die Last der Callback-Funktion der Last () -Methode abgeschlossen werden.

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

Answer 2

Setzen Sie die CSS in den Rückruf für die .load apply ()

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