jQuery .append() non funziona in IE, Safari e Chrome

Question

Quindi sto utilizzando la funzione AJAX di jQuery per leggere alcuni XML per me e ha funzionato bene. Ma ora sto provando a manipolare la proprietà display di 4 differenti div generate dinamicamente quando mouseup viene attivato dagli elementi opzione. La dimensione e x/y dei div sono determinati dall'XML e vengono analizzati.

Il mio problema sta nel fatto che questi div non vengono generati o semplicemente non vengono visualizzati in IE, Safari e Chrome. In Firefox e Opera, funzionano. Sto usando jQuery's .append() per creare i div e quindi la funzione .css() per manipolarli. Guardando negli strumenti di sviluppo di Chrome, sto vedendo che la proprietà css che viene modificata nello script viene sovrascritta dalla proprietà nel foglio di stile. Qualche correzione?

div creato qui:

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; 

funzioni MouseUp che cambiano la proprietà di visualizzazione:

$('#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

Dal momento che si può vedere in strumenti di sviluppo che lo stile sia correttamente inserito l'elemento, la questione è non tanto su JQuery quanto sulla cascata di CSS. Normalmente, qualsiasi cosa aggiunta direttamente all'elemento come questo dovrebbe avere la precedenza, ma ci sono delle eccezioni. CSS specificity può causare un comportamento confuso. Hai qualcosa di importante da fare per intralciarti?

Inoltre, dal momento che ti stai nascondendo e mostrando con display: blocco e visualizzazione: nessuno, assicurati di non avere una visibilità: nascosto in CSS che sovrascriverà.

Inoltre, c'è un motivo per cui non si sta semplicemente utilizzando .show() e .hide() o .toggle()? Puoi anche provare a rimuovere le classi che si intromettono e impostarne altre utilizzando .removeClass(), .addClass() o .toggleClass().

Se tutto il resto fallisce puoi sempre provare $ ('. BodyEditable'). Css ('display', 'none! Important') ;.

Cerco di evitare! Importante perché causa così tanti mal di testa ... ma è nelle specifiche per un motivo.

Answer 2

Quindi sono riuscito a risolvere il problema. Le opzioni nel menu di selezione non chiamavano il mouse, quindi ho usato una funzione .change() nel menu di selezione mentre utilizzavo: selettore selezionato per trovare ciò che era selezionato.

Grandi grazie a Bradley per avermi messo sulla strada giusta.

Answer 3

soluzione semplice per questo problema per me: aggiungi al div che stai aggiungendo css display:block;. probabilmente qualsiasi altro tipo di display: potrebbe aiutare.