jQuery .append()无法在IE,Safari和Chrome中运行

Question

所以我正在使用jQuery的AJAX函数为我读取一些XML,并且它运行得很好.但是现在我试图在从选项项触发mouseup时操纵4个不同动态生成的div的显示属性.div的大小和x/y由XML确定并通过解析.

我的问题在于,这些div不会生成,也不会出现在IE,Safari和Chrome中.在Firefox和Opera中,它们确实可以工作.我正在使用jQuery的.append()来创建div,然后使用.css()函数来操作它们.查看Chrome的开发人员工具,我发现脚本中正在更改的css属性被样式表中的属性覆盖.任何修复？

在这里创建的Div:

    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;

用于更改显示属性的Mouseup函数:

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

由于您可以在开发工具中看到样式已正确添加到元素中，因此问题与其说与 JQuery 有关，不如与 CSS 级联有关。通常，像这样直接添加到元素的任何内容都应该优先，但也有例外。 CSS 特异性可能会导致一些令人困惑的行为。有什么重要的地方妨碍你吗？

另外，由于您使用 display:block 和 display:none 隐藏和显示，请确保 CSS 中没有 Visibility:hidden ，它将覆盖。

另外，您不只使用.show()和.hide()或.toggle()的任何原因？您还可以尝试删除妨碍的类并使用.removeClass()、.addClass()或.toggleClass()设置其他类。

如果所有其他方法都失败，您可以随时尝试 $('.bodyEditable').css('display', 'none !important');。

我尽量避免 !important 因为它会引起很多麻烦……但它出现在规范中是有原因的。