jQuery .append() ne fonctionne pas dans IE, Safari et Chrome

Question

J'utilise donc la fonction AJAX de jQuery pour lire du code XML pour moi et cela a très bien fonctionné. Mais maintenant, j'essaie de manipuler la propriété d'affichage de 4 div différents dynamiquement générées lorsque mouseup est déclenché à partir d'éléments d'option. La taille et les x/y des divs sont déterminés par XML et analysés.

Mon problème réside dans le fait que ces divs ne sont pas générés ou n'apparaissent pas dans IE, Safari et Chrome. Dans Firefox et Opera, ils fonctionnent. J'utilise .append() de jQuery pour créer les divs puis la fonction .css() pour les manipuler. En regardant dans les outils de développement de Chrome, je vois que la propriété css changée dans le script est remplacée par la propriété dans la feuille de style. Des correctifs?

Divs créé ici:

case "dynamic": 
    var n = name; 
    switch(portion){ 
     case "stub": 
     $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>"); 
     break; 
     case "body": 
     $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>"); 
     break; 
    } 
    break; 
    case "static": 
    var n = name; 
    switch(portion){ 
     case "stub": 
     $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>"); 
     break; 
     case "body": 
     $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>"); 
     break; 
    } 
    break; 

fonctions mouseup qui changent la propriété d'affichage:

$('#StubTemplates').find('.ddindent').mouseup(function(){ 
    var tVal = $(this).val(); 
    var tTitle = $(this).attr('title'); 
    if(!stubActive){ 
    $('.stubEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    stubActive = true; 
    }else{ 
    $('.stubEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    stubActive = false; 
    } 
    }); 
    $('#StubTemplates').find('#stubTempNone').mouseup(function(){ 
    $('.stubEditable').css('display', 'none'); 
    }); 
    $('#BodyTemplates').find('.ddindent').mouseup(function(){ 
    var tVal = $(this).val(); 
    var tTitle = $(this).attr('title'); 
    if(!bodyActive){ 
    $('.bodyEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    bodyActive = true; 
    }else{ 
    $('.bodyEditable').css('display', 'none'); 
    $('#'+tVal).css('display', 'block'); 
    bodyActive = false; 
    } 
    }); 
    $('#BodyTemplates').find('#bodyTempNone').mouseup(function(){ 
    $('.bodyEditable').css('display', 'none'); 
    }); 

Answer 1

Comme vous pouvez le voir dans les outils de dev que le style est correctement ajouté à l'élément, la question est pas tant sur JQuery que sur la cascade de CSS. Normalement, tout ce qui est ajouté directement à l'élément comme ceci devrait avoir la priorité, mais il y a des exceptions. CSS specificity peut provoquer un certain comportement déroutant. Avez-vous quelque chose d'important à faire?

De plus, puisque vous masquez et affichez avec display: block et display: none, assurez-vous de ne pas avoir de visibilité: caché en CSS qui va surcharger.

En outre, une raison quelconque pourquoi vous n'utilisez pas simplement .show() et .hide() ou .toggle()? Vous pouvez également essayer de supprimer les classes qui gênent et d'en définir d'autres en utilisant .removeClass(), .addClass() ou .toggleClass().

Si tout le reste échoue, vous pouvez toujours essayer $ ('. BodyEditable'). Css ('display', 'none! Important') ;.

J'essaie d'éviter! Important car il provoque tant de maux de tête ... mais c'est dans les spécifications pour une raison.

Answer 2

J'ai donc réussi à résoudre le problème. Les options du menu de sélection n'appelaient pas le mouseup, j'ai donc utilisé une fonction .change() dans le menu de sélection tout en utilisant un sélecteur: pour sélectionner ce qui était sélectionné.

Un grand merci à Bradley pour m'avoir mis sur la bonne voie.

Answer 3

solution simple pour ce problème pour moi: ajouter à la div que vous ajoutez css display:block;. probablement tout autre type de display: pourrait aider.