pauses de rembourrage jQuery selector?

Question

J'ai passé 2 heures ce matin à essayer de comprendre pourquoi ma fonction jQuery fonctionnait dans une partie de la page mais pas dans une autre. Je l'ai finalement réduit à un rembourrage vertical sur un conteneur.

Si j'avais dans mon CSS:

div.collapsiblePanel { 
padding: 0px 1%; 
} 

puis, via jQuery, je peux trouver l'élément parent (.CollapsiblePanel) et pourrait traverser dans cette div et manipuler les éléments enfants. Cependant, si je change juste une chose dans ma feuille de style à ceci:

div.collapsiblePanel { 
padding: 5px 1%; 
} 

Alors jQuery peut trouver le parent (.CollapsiblePanel) mais est incapable de traverser les enfants.

Fou, non? Des théories sur ce qui se passe? Je me cognais la tête sur celui-ci en pensant qu'il devait être quelque chose avec mon jQuery mais c'était finalement un problème de CSS.

par demande, quelques extraits de balisage/css/code:

La fonction jQuery spécifique qui n'a pas été (apparemment) de travail:

function finishUp(ajaxContainer,originalContainer,loadingAlert) { 
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red"); 
    var saveButtonn = $(ajaxContainer).find("input.btnSave"); 
    console.log(ajaxContainer); 
    console.log(originalContainer); 
    console.log(loadingAlert); 
    console.log(saveButton); 
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red").click(function(){ 
     alert("you clicked the save button"); 
     savePanel($(this)); 
    }); 

}; 

Qu'est-ce que ça fait est, après des fonctions précédente charge contenu via AJAX, puis afficher le conteneur, cette fonction entre et attache un événement de clic au bouton.

Comme vous pouvez le voir, j'ai un tas de code de journalisation supplémentaire là-dedans. Lorsque mon remplissage vertical CSS est défini sur '0', Firebug enregistre le nom d'objet approprié de chacun d'entre eux. Lorsque je modifie mon remplissage vertical CSS à toute autre chose, le dernier objet (saveButton) revient vide/vide dans Firebug.

Le code HTML:

<div class="ajaxEditPanel editablePanel collapsiblePanel" style="display: block;">  
    <form> 
     <fieldset class="sideLabels dividers"> 
     <legend>Edit Realtionship Information</legend> 

       ...the form... 
       <div class="formItem formButtons" 
        <input value="save" class="button btnSave" type="button"> 
        <input value="cancel" class="button btnCancel" type="button"> 
       </div>      
     </fieldset>   
    </form> 
</div> 

Notez que cette DIV est créé par des fonctions précédentes jQuery et chargé avec le contenu. Au début, je pensais que c'était un problème de synchronisation, où j'essayais d'attacher un événement à un objet qui n'avait pas encore été chargé dans le DOM. Cependant, cela n'explique pas pourquoi les mêmes fonctions exactes ont fonctionné ailleurs sur la page. La seule variable que je pourrais changer et qui ferait que ce travail fonctionne ou non finit par être un peu de remplissage de CSS. Si, dans les parties de la page où fonctionne la fonction actuelle, j'ajoute aussi du padding vertical au conteneur, ils cassent aussi jQuery en sélectionnant les éléments enfants.

Answer 1

Je crois que je suis déjà tombé sur quelque chose de similaire - il pourrait s'agir d'un problème de timing où le DOM est rendu légèrement après que le JS ait été invité à se lier aux éléments. Dans votre cas, le remplissage peut rendre firefox prendre quelques millisecondes de plus pour rendre ces div s et donc provoquer le déclenchement de la liaison avant qu'il n'y ait quoi que ce soit à lier. Je comprends que Firebug peut aussi ralentir le processus de rendu car il saute aux points pour rendre la source dans son image.

Pour confirmer que ce n'est pas le cas, essayez d'ajouter un setTimeout(function(){ ... }, 500) autour de votre code de liaison (peut-être aussi en désactivant le firebug) pour voir s'il se lie après cela. Si c'est le cas, alors il y a votre problème.

Une autre approche peut être de changer vos entrées en liens et utiliser la délégation de l'événement pour déclencher l'événement: jQuery('.btnSave').live('click', function(){savePanel($('selector>for>panel')); })