JQuery application css pour charger div

Question

Je rencontre un problème d'application dynamique de css à une div chargée à l'aide de la fonction load () . Le html en cours de chargement est trouvé et inséré. Je peux utiliser une commande de fermeture. Cependant, le css que j'essaie d'appliquer n'est pas enregistré. Tout semble bien fonctionner sans la dynamique css. Je pense que je peux avoir quelque chose de mal ou une fonction incorrecte ici:

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

Vous définissez les propriétés CSS au mauvais moment. Ce que vous devez faire, c'est appliquer les propriétés CSS une fois le chargement terminé à l'aide de la fonction de rappel de la méthode load ().

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

Answer 2

Placez le code CSS d'application dans le rappel pour le .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();
        });
});