动态附加 HTML 后内联 CSS 丢失答案

【问题标题】：Inline CSS is lost after dynamically appending HTML动态附加 HTML 后内联 CSS 丢失
【发布时间】：2013-05-25 10:49:57
【问题描述】：

我正在使用一个简单的代码将 XML 文件内容动态加载到 div 中。加载的文件包含带有内联 CSS 的 HTML 代码。该文件加载正常，可以在开发工具中看到，但是它丢失了所有的 CSS，您甚至无法通过开发工具编辑 CSS。奇怪的是，如果我选择“编辑为 HTML”，然后添加一个空格并保存，CSS 就会加载并正常工作！

首先，我怀疑文件内容并尝试了不同的编码，但这似乎不是问题。我还怀疑我需要删除所有空格，但没有用。

我认为附加代码时不会自动应用 CSS。

下面是我用于动态加载的代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({type: "GET", url: "hadeeth.jpg", dataType: "xml",
            success: function (xml) {
                var val;
                var now = new Date();
                var cdate = now.getDate() + "-" + (now.getMonth() + 1) + "-" + now.getFullYear();
                var done = false;
                $(xml).find('hadeeth').each(function () {
                    var idate = $(this).find('date').text();
                    val = $(this).find('value').contents();
                    if (idate == cdate)
                    {
                        $('#ahadeeth').html(val);
                        done = true;
                    }
                });
            }
        });
    });
</script>
<div id="ahadeeth"></div>

这是加载的 div 的示例内容：

<div id="ahadeeth"><h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">testing</span></strong></span></h4></div>

提前感谢您的帮助。

【问题讨论】：

所以你是说你有一个 jpg 图像文件，你试图以 XML 的形式访问它，但它真的包含 HTML 吗？
@adeneo 他有一个带有 .jpg 后缀的 XML 文件（奇怪）。 XML 的元素之一包含 HTML（对我来说似乎没问题）。
在一个简单的情况下插入样式化的 HTML 工作：jsfiddle.net/barmar/ZkaJ7
.html() 的参数应该是一个字符串。 .contents() 返回 jQuery 对象，而不是字符串。也许应该是val=$(this).find('value').html()？
.JPG 只是对解决方法 .htaccess 规则的扩展，内容是纯 XML。

标签： jquery css ajax dynamic inline

【解决方案1】：

将 .contents() 更改为 .html()。看起来您想要元素内部的 html，而不是 jQuery 对象。

http://api.jquery.com/contents/
http://api.jquery.com/html/

编辑：我没有看到你的评论 Barmar，但我同意。

【讨论】：

非常感谢，您为我指明了正确的方向。不幸的是 .html() 不适用于 XML，但问题确实是由使用 jquery 对象而不是文本引起的。进一步研究我能够通过将数据封装在中来解决这个问题。我是从另一个帖子的回复中得到的：stackoverflow.com/questions/3041439/… 感谢您的帮助。

【解决方案2】：

问题是由于使用了 JQuery 对象而不是实际文本。正确的方法是使用 .text() 函数来获取实际的 html 代码，但是它一直只返回最内部的文本而没有任何 html。

它应该返回这个：

<h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">Test</span></strong></span></h4>

但是它只返回这个：

Test

解决方案是将实际的 HTML 代码放在 CDATA 标记中，以便解析器理解它应该将整个内容作为文本返回，而不是尝试解析它。

所以不要在 XML 中使用以下节点：

<hadeeth>
<date>3-5-2013</date>
<value><h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">Test</span></strong></span></h4></value>
</hadeeth>

我添加了CDATA标签，这样就变成了这样：

<hadeeth>
<date>3-5-2013</date>
<value><![CDATA[<h4 style="text-align: center;"><span style="font-size: xx-large;"><strong><span style="font-family: book antiqua,palatino; color: #ff0000;">Test</span></strong></span></h4>]]></value>
</hadeeth>

感谢@Andrew 指出正确的方向，感谢@elektronaut 在下面的线程中使用 CDATA 标签。

jquery XML .html() instead of .text() is not displaying?

【讨论】：