jQuery .append() 在 IE、Safari 和 Chrome 中不起作用

Posted 2023-03-06

【中文标题】jQuery .append() 在 IE、Safari 和 Chrome 中不起作用

【英文标题】：jQuery .append() not working in IE, Safari, and Chrome

【发布时间】：2011-02-20 05:34:03

【问题描述】：

所以我正在使用 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;

改变显示属性的鼠标功能：

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

【问题讨论】：

无论如何，您可以将 code-sn-p 缩减为导致问题的简单示例？或者至少提供一些有关导致问题的确切 ID/类的信息？您可以执行的任何格式来清理该 sn-p 也会很有用。干杯。

好的，尽量把它剪下来。

$('#'+tVal) 呃。有人听说过document.getElementById(tval)吗？ jQuery hash-appending id-getter 在 Web 上非常流行……但它又慢又笨拙。

@Delan - 我和其他人一样讨厌字符串添加，但问题在于 javascript 本身。它非常需要一个字符串格式化程序。毫无疑问，市场上有很多解决方案，但它需要使用语言。就 jQuery id 而言，我喜欢这样的语法：jQuery(id: tVal) 或 jQuery('class': classVar)。 jQ 1.4 已经提供了 MooTools，例如使用对象作为参数的元素创建 - milesj.me/blog/read/77/Element-Creation-In-JQuery-1.4。像这样的选择器也会很棒。

@Delan - 实际上 jQuery 在检测 ID 选择器时在内部使用 document.getElementById，所以这里的慢和笨拙并不是非常准确。

【参考方案1】：

由于您可以在开发工具中看到样式已正确添加到元素中，因此问题不在于 JQuery，而在于 CSS 的级联。通常，像这样直接添加到元素的任何内容都应该优先，但也有例外。 CSS specificity 可能会导致一些令人困惑的行为。您是否有一个 !important 妨碍您的地方？

此外，由于您使用 display:block 和 display:none 进行隐藏和显示，请确保您在 CSS 中没有可见性：hidden 会覆盖。

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

如果一切都失败了，您可以随时尝试 $('.bodyEditable').css('display', 'none !important');。

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

【讨论】：

没有一个！重要的。 .stubEditable 和 .bodyEditable 都设置为 display: none。

刚刚在我对一篇可能有用的关于 CSS 特异性的文章的回答中添加了一个链接。我经常遇到这种事情。我绝不是 CSS 大师……我通常会听从我们团队中的驻地 CSS 人员，这几乎总是归结为一些时髦的级联/特异性冲突。您可以看到添加到元素的样式排除了 JQuery 的事实......除非 JQuery 以某种方式破坏了样式属性。

Bradley，我刚接触 jQuery 还不到一周，所以我正在尝试尽可能多地吸收。将来我肯定会使用 show() 和 hide()。此外，我尝试了 removeClass() 和 addClass() 均无济于事。如果可能，两者都将被使用。不幸的是，尝试使用 !important 覆盖样式没有任何效果。

开发工具告诉你覆盖元素样式的规则是什么？

【参考方案2】：

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

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

【参考方案3】：

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