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 specificity会导致一些令人困惑的行为。你有一个重要的地方吗？

此外，由于您隐藏并显示display：block和display：none，请确保您没有可见性：隐藏在将覆盖的CSS中。

此外，您不仅仅使用.show()和.hide()或.toggle()的原因？您还可以尝试删除妨碍使用.removeClass()，.addClass()或.toggleClass()的其他类。

如果一切都失败了，你可以尝试$（'。bodyEditable'）。css（'display'，'none！important'）;。

我尽量避免！重要，因为它会导致如此多的麻烦......但是出于某种原因，这是出于规范。

Answer 2

所以我设法解决了这个问题。选择菜单中的选项没有调用mouseup，所以我在选择菜单上使用了.change（）函数，同时使用：selected选择器来查找所选内容。

非常感谢布拉德利让我走上正轨。

Answer 3

对我来说这个问题的简单解决方案：添加到你要附加css display:block;的div。可能任何其他类型的display:都可能会有所帮助。

jQuery .append（）无法在IE，Safari和Chrome中运行

3 个答案: