jQuery .append() no funciona en IE, Safari y Chrome

Question

Así que estoy usando la función AJAX de jQuery para leer algo de XML para mí y funcionó bien. Pero ahora estoy tratando de manipular la propiedad de visualización de 4 diferentes divs generados dinámicamente cuando se desencadena el mouseup a partir de elementos de opción. El tamaño y x/y de los divs están determinados por el XML y se analizan a través de.

Mi problema radica en el hecho de que estos divs no se generan o simplemente no se muestran en IE, Safari y Chrome. En Firefox y Opera, funcionan. Estoy utilizando .append() de jQuery para crear los divs y luego la función .css() para manipularlos. Al examinar las herramientas para desarrolladores de Chrome, veo que la propiedad en la hoja de estilos está anulando la propiedad css que se está modificando en el script. ¿Alguna solución?

Divs creado aquí:

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; 

funciones mouseUp que cambian la propiedad de presentación:

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

Ya que se puede ver en las herramientas dev que el estilo se añade correctamente al elemento, la cuestión es no tanto sobre JQuery como sobre la cascada de CSS. Normalmente, cualquier elemento agregado directamente al elemento como este debe tener prioridad, pero hay excepciones. CSS specificity puede causar un comportamiento confuso. ¿Tienes alguna? Importante en algún lugar en el camino?

Además, como se está ocultando y se muestra con pantalla: bloquear y mostrar: ninguno, asegúrese de no tener visibilidad: oculto en CSS que se anulará.

Además, ¿por qué no está utilizando .show() y .hide() o .toggle()? También puede intentar eliminar las clases que se interponen en el camino y configurar otras utilizando .removeClass(), .addClass() o .toggleClass().

Si todo lo demás falla, siempre puedes probar $ ('. BodyEditable'). Css ('display', 'none! Important') ;.

Trato de evitar! Importante ya que causa tantos dolores de cabeza ... pero está en la especificación por una razón.

Answer 2

Así que logré solucionar el problema. Las opciones en el menú de selección no llamaban al mouse, así que usé una función .change() en el menú de selección mientras usaba un selector: seleccionado para encontrar lo que se seleccionó.

Muchas gracias a Bradley por ponerme en el camino correcto.

Answer 3

solución simple para este problema para mí: agregue a la div que está agregando css display:block;. probablemente cualquier otro tipo de display: podría ayudar.