jQuery html 属性在 IE 中不起作用

Posted 2023-05-08

技术标签:

【中文标题】jQuery html 属性在 IE 中不起作用【英文标题】：jQuery html attribute not working in IE 【发布时间】：2010-09-29 14:09:11 【问题描述】：

我在表单中使用国家和州下拉菜单。每当用户在下拉列表中选择国家时，该国家的各个州将填充在州下拉列表中。我正在使用 AJAX 调用填充下拉列表中的状态。问题是在 Mozilla 中填充了这些状态，但在 IE 中不起作用。我猜想在状态下拉列表中加载状态时 jQuery 存在一些问题。我使用的 jQuery 代码是

$('select#edit-country').change(function(e) 

    $.getJSON("loadContactUsStates",id: $(this).val(), ajax: 'true', function(j)
        var options = '';

        for (var i = 0; i < j.length; i++)  
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

        

    <!-----I guess the problem is with the below line------------------>
       $("select#edit-state").html(options);

    )//end json

);

【问题讨论】：

Why does IE not add <option> to my dropDown? 的可能重复项 【参考方案1】：

尝试使用 append 代替 html 方法，如 post 中所述。

编辑

实际上，我自己也遇到过这个问题。对我来说，答案是先调用empty，然后调用append，这与使用 html 方法的效果（我认为？）相同。

【讨论】：

应该，但请参阅我关于 1.4.2 损坏的帖子。【参考方案2】：

另外（在我的例子中）检查你是否有有效的 html，我有不匹配的标签，它在 firefox 中工作并且在 IE（6-8）中没有

【讨论】：

我也遇到了同样的问题，奇怪的是未关闭的标签会让 IE 忽略所有内容。这里也一样...我在我的一个 【参考方案3】：

添加到 .ajax 选项

缓存：假，

【讨论】：

【参考方案4】：

这对我有用：（我在 IE7 - IE9 和 Chrome 上测试过）

看起来 IE 的诀窍是使用 DIV 包装器

原始 html：

<div  id="dynamicMenu"></div>

jQuery 脚本：

$.ajax(

            url: "/myapp/myajaxUrl.jsp",
            type: "GET",
            dataType: "html",
            async: false,
            success: function(msg) 
                $("#dynamicMenu").html(msg);
            );

msg 类似于：

<TABLE>
<TBODY>
 <TR>
  <TD><LABEL for="dropdown1">OS type:</LABEL></TD>
  <TD>
   <SELECT id="dropdown1">
    <OPTION selected value="">Select OS</OPTION>
    <OPTION value="WIN">Windoze</OPTION>
    <OPTION value="UX">Unix</OPTION>
    <OPTION value="LX">Linux</OPTION>
   </SELECT>
  </TD>
 </TR>
</TBODY>
</TABLE>

我试过 .empty() .html() 无济于事，但上面的效果很好！

【讨论】：

【参考方案5】：

以下方法为我解决了这个问题：

$('Element ID OR Class').empty().html(string);

首先使用empty()，然后使用html()设置html

【讨论】：

是的也为我工作。唯一的问题是 ie，这个方法解决了它。【参考方案6】：

如果你使用 jquery 解析 xml，并且在 IE 中需要 html()，试试这个：

var 内容 = ($.browser.msie) ? $(this).context.xml : $(this).html();

这解决了我的问题。我希望它也会对某人有所帮助。

您好。

【讨论】：

【参考方案7】：

经过数小时的挫折后，我意识到 IE 不支持除 div 之外的 html5 元素的 jquery 属性函数。我试图这样做：

success: function (response, textStatus, XMLHttpRequest) 
    $response = $(response.replace(/\t/g, " "));
    $responseHTML = $response.find("#pageContainer").html();
    $container.html($responseHTML);

对于这个元素：

<nav id="pageContainer" class="content">
</nav>

改成这样就解决了问题：

<nav>
    <div id="pageContainer" class="content">
    </div>
</nav>

【讨论】：

【参考方案8】：

我刚刚遇到了同样的问题，建议的修复都没有帮助。原来传递字符串中的制表符是原因。一旦我删除了所有这些， html() 和 append() 都可以正常工作。猜猜 IE 没有格式化字符串.. hmpf.

【讨论】：

【参考方案9】：

在收到带有函数 jQuery.ajax() 的 AJAX HTML 请求，然后尝试使用 jQuery( html_result_data ) 解析结果后，我遇到了同样的问题。解决方案是像这样在 html_result_data 中剥离标题和所有选项卡和“返回”：

success: function( data ) 
   // God this is ugly
   data = data.split("<body>")[1].split("</body>")[0];
   data = data.split("\t").join("").split("\r").join("").split("\n").join("");                      
   data = jQuery( data );
   ...

【讨论】：

【参考方案10】：

Jukums 的评论让我尝试关闭 ColdFusion 调试输出，然后 .html() 在 IE8 中为我工作。强制调试输出关闭：

<cfsetting showdebugoutput="No">

【讨论】：

【参考方案11】：

就我而言，这就像更改 jquery 版本一样简单。我使用的是 jquery-1.3.2，我添加了这一行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>

而不是 jquery-1.3.2 导入。无需更改我的源代码中的任何内容，.prepend 函数在 IE、FF 和 Chrome 中完美运行。

【讨论】：

【参考方案12】：

我遇到了同样的问题，发现最简单的解决方案是使用replaceWith() 函数。

【讨论】：

【参考方案13】：

我在使用 IE 时遇到了问题：

$('#valor_total').html(valor_total);

其中id 与作为参数传递的变量同名。更改 ID 效果很好：

$('#div_valor_total').html(valor_total);

【讨论】：

【参考方案14】：

对我来说，我只能通过将我的选择放在一个占位符 div 中，然后通过 .html();该 div 的整个声明。完全有效。

【讨论】：

【参考方案15】：

另外请注意，如果您在选择器中使用 tagName 前缀，它会比仅使用 id 慢。

在你的情况下，只需使用$("#edit-state").append(options)

【讨论】：

【参考方案16】：

检查返回数据中的任何 javascript 在语法上是否正确。

我有一个带有逗号结尾的 JSON 选项对象，这足以让 IE 拒绝运行它。

【讨论】：

【参考方案17】：

在我的情况下，返回的数据在语法上也应该是正确的。我有一些不匹配的标签，比如未闭合的标签

或 .. 等

检查所有数据是否正确

如果这是一个 ajax 请求，那么快速的调试方法是在您填充的区域之外添加一个文本区域，并使用返回的数据填充该文本区域。然后检查该数据是否存在不一致。 Jquery.html 在 IE 上运行良好

【讨论】：

【参考方案18】：

在 IE8 中转到工具-> 互联网选项-> 然后选择高级标签。然后点击reset以重置所有 Internet Explorer 设置。

我以为我的代码有问题，但问题是 IE8。这是一种享受。

祝你好运，希望这会有所帮助。

【讨论】：

【参考方案19】：

您使用的是 1.4.2 吗？在 IE 中使用无效缓存条目的 cleanData 方法存在问题。可以在here 找到错误和相应的修复。这会影响对.html()的调用

【讨论】：

任何想法如何在不升级到新的 jQuery 版本的情况下解决这个问题？是的。只需修改 jQuery 库以包含我在那里发布的行。【参考方案20】：

html 在 IE 中不起作用时，我也遇到了同样的问题。

如果您的 html 无效，我相信它不起作用

例子：

就我而言，我使用的是没有关闭标签的 div。所以无效的html可能是IE的罪魁祸首

【讨论】：

【参考方案21】：

由于这里没有提到解决方案：激活兼容模式时，我在 IE8 中遇到了同样的问题。解决方案是将 jQuery 对象传递给 .html() 函数，如下所示：

$("select#edit-state").html($(options));

如果选项是一个 jQuery 对象并且也是作为一个对象构建的，这不是问题。但在上面的例子中，这应该可以解决问题 - 至少对我来说是这样。

【讨论】：

【参考方案22】：

就我而言，我不得不更改选择器，它是<figure> 标记。这就是我所拥有的：

HTML：

<figure id="imagen">...</figure>

JS（不起作用）：

$("#imagen").html(res);

我不得不替换为：

HTML：

<div id="imagen">...</div>

JS（有效！）：

$("#imagen").html(res);

【讨论】：

【参考方案23】：

就我而言，问题在于我在加载的数据中注释掉我的 javascript 的方式。

// Works fine

/* Works fine */

<!-- This causes a syntax error in IE -->

我之前在 IE 中从未遇到过任何问题，只有在使用 ajax 将其加载到现有页面时。其他浏览器也没有问题。

【讨论】：

【参考方案24】：

向控制器添加无缓存属性为我解决了这个问题。

从这个答案复制：https://***.com/a/12948321/1389589

【讨论】：

以上是关于jQuery html 属性在 IE 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

jquery 动画 scrollTop 在 ie 或 firefox 中不起作用

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

jQuery 动画在 chrome/safari/ie 中不起作用

一个在 IE 中不起作用的简单 jQuery 脚本 - 认为 jQuery 是跨平台的！

HTML5 输入类型占位符在 IE 中不起作用

jQuery .css background-position-x 在悬停时更改在 IE 中不起作用