Jquery applica css per caricare div

Question

Sto riscontrando un problema con l'applicazione css in modo dinamico a un div caricato usando la funzione load () . L'html che viene caricato viene trovato e inserito, e posso usare un comando di chiusura. Tuttavia, il CSS che sto cercando di applicare non viene registrato. Tutto sembra funzionare bene meno il css dinamico. Penso che potrei avere qualcosa di sbagliato o una funzione errata qui:

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

Stai impostando le proprietà CSS al momento sbagliato. Quello che devi fare è applicare le proprietà CSS al termine del caricamento utilizzando la funzione di callback del metodo load ().

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

Answer 2

Inserisci il CSS di applicazione nel callback per .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();
        });
});