jQuery .append()在IE、Safari和Chrome中无法工作

8
所以我正在使用jQuery的AJAX函数来读取XML,它一直运行得很好。但现在我正在尝试在选项项目触发mouseup时操作4个不同动态生成的div的显示属性。div的大小和x/y是通过XML确定并进行解析的。
我的问题在于,这些div在IE、Safari和Chrome中要么没有生成,要么就不显示。在Firefox和Opera中,它们可以正常工作。我使用jQuery的.append()创建div,然后使用.css()函数对其进行操作。在Chrome的开发者工具中,我看到脚本中被更改的css属性被样式表中的属性覆盖了。有什么解决办法吗?
此处创建Divs:
    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');
   });

1
你能否将代码片段简化为导致问题的最基本示例?或者至少提供一些关于导致问题的确切ID /类的信息?任何可以清理该片段的格式都将非常有用。谢谢。 - malonso
好的,我已经尽可能地精简了它。 - user1385191
$('#'+tVal) 真让人头疼。有没有人听说过 document.getElementById(tval)?jQuery中的哈希追加ID获取器在Web上如此普遍...但它非常缓慢和笨拙。 - Delan Azabani
1
@Delan - 我和其他人一样讨厌字符串的拼接,但问题在于Javascript本身。它需要一个字符串格式化程序。市场上有很多解决方案,毫无疑问,但它需要成为语言的一部分。至于jQuery ID,我希望能够使用这样的语法:jQuery({id: tVal})jQuery({'class': classVar})。 jQ 1.4已经提供了类似MooTools的对象参数元素创建功能- http://www.milesj.me/blog/read/77/Element-Creation-In-JQuery-1.4。选择器的类似功能也将非常棒。 - Anurag
1
@Delan - 实际上,当检测到ID选择器时,jQuery内部使用document.getElementById,因此“慢”和“笨拙”在这里并不是非常准确。 - steve_c
@Matt - 我会将选择器的结果缓存到本地变量中。这意味着您可以为选择器的结果创建一个变量,并多次使用它。var stubTemplates = $('#StubTemplates'); stubTemplates.find(...) 等等使用 $(this) 也是同样的道理。 - steve_c
3个回答

4

从开发工具中可以看到样式已正确添加到元素中,因此问题与 JQuery 关系不大,而与 CSS 层叠有关。通常,像这样直接添加到元素中的任何内容都应该具有优先权,但也有例外情况。CSS 优先级可能会导致一些令人困惑的行为。你是否有使用 !important 等方式干扰了它?

此外,由于你正在使用 display:block 和 display:none 进行隐藏和显示,请确保你在 CSS 中没有使用 visibility:hidden,否则会被覆盖。

还有,你为什么不直接使用 .show().hide().toggle() 呢?你也可以尝试使用 .removeClass().addClass().toggleClass() 删除干扰的类并设置其他类。

如果所有方法都无效,你始终可以尝试 $('.bodyEditable').css('display', 'none !important');。

我尽量避免使用 !important,因为它会引起很多麻烦,但它确实有其存在的理由。


不要使用 !important。.stubEditable 和 .bodyEditable 都设置为 display: none。 - user1385191
刚刚在我的回答中添加了一篇关于CSS特异性的文章链接,可能会有用。我经常遇到这种情况。我绝不是CSS大师……通常我会请教我们团队里的CSS专家,而且几乎总是由于某些奇怪的级联/特异性冲突。你能看到样式被添加到元素中,这排除了JQuery的可能性……除非JQuery在某种程度上破坏了样式属性。 - Bradley Mountford
Bradley,我对jQuery还不到一周的时间,所以现在我正在尽可能多地吸收知识。我将来肯定会使用show()和hide()。此外,我也尝试了removeClass()和addClass(),但都没有成功。在可能的情况下,两者也将被使用。不幸的是,尝试使用!important来覆盖样式没有任何效果。 - user1385191
开发工具告诉你哪个规则覆盖了元素样式? - Bradley Mountford

1

所以我成功解决了这个问题。选择菜单中的选项没有调用mouseup事件,因此我在选择菜单上使用.change()函数,同时使用:selected选择器找到所选内容。

非常感谢Bradley给我指明了正确的方向。


0
这个问题的简单解决方案是:在你添加的 div 中添加 CSS display:block;,可能其他类型的 display: 也可以帮助解决。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接