为什么动态添加列表项在Chrome和Firefox中有效但在IE8中无效?(Why does dynamically adding a list item work in Chrome and Fir

编程入门 行业动态 更新时间:2024-10-25 12:24:28
为什么动态添加列表项在Chrome和Firefox中有效但在IE8中无效?(Why does dynamically adding a list item work in Chrome and Firefox but not in IE8?)

我有一些jQuery代码在Firefox和Chrome中运行良好,但在Internet Explorer 8中无效(未在其他IE版本中测试过)。 Internet Explorer以标准模式运行。

下面代码的目的是动态创建一个新的列表项。 其内容设置为隐藏节元素内部的表单。 使用IE时会发生什么情况是section元素变为unhidden并且li被添加到列表中,但是为空。

IE中的这段代码出了什么问题?

$('ul.elementlist').on('click', '.add-element-icon', function (event) { var plusIcon = $(this); plusIcon.hide(); var parentLi = plusIcon.parent(); var before = parentLi.attr('id'); var after = parentLi.next().attr('id'); if (typeof after === "undefined") { after = 'none'; } var li = $('<li class="element">').html($('section.add-element').html()); $('input[name="elementBefore"]', li).val(before); $('input[name="elementAfter"]', li).val(after); li.insertAfter(parentLi); });

I have some jQuery code which works great in Firefox and Chrome, but does not work in Internet Explorer 8 (haven't tested in other IE versions). Internet Explorer is running in standards mode.

The intent of the code below is to create a new list item on the fly. Its content is set to that of a form that is inside of a hidden section element. What happens when using IE is that the section element becomes unhidden and the li is added to the list, but is empty.

What's wrong with this code in IE?

$('ul.elementlist').on('click', '.add-element-icon', function (event) { var plusIcon = $(this); plusIcon.hide(); var parentLi = plusIcon.parent(); var before = parentLi.attr('id'); var after = parentLi.next().attr('id'); if (typeof after === "undefined") { after = 'none'; } var li = $('<li class="element">').html($('section.add-element').html()); $('input[name="elementBefore"]', li).val(before); $('input[name="elementAfter"]', li).val(after); li.insertAfter(parentLi); });

最满意答案

由于您正在使用section元素,我猜您正在使用其他HTML5元素并使用HTML5 doctype: <!DOCTYPE html> 。 根据这些假设,我认为你需要做一些事情来使你的标记“IE友好”。

首先确保IE真正在IE8标准兼容模式 *中运行,方法是在头部添加以下元标记:

<meta http-equiv="x-ua-compatible" content="IE=8"/>

紧跟标准兼容性设置后,添加对html5shiv的引用,这是一个用于IE识别和设置HTML5元素样式的JavaScript shiv :

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

在这两个变化之间你应该好好去。 更改后,通过按CTRL + F5强制IE执行完整资源刷新。

*如果这是一个新网站,您可能需要考虑使用IE=edge因为它告诉Internet Explorer使用可用的最高模式。

Since you are using the section element I would guess that you are making use of other HTML5 elements and are using an HTML5 doctype: <!DOCTYPE html>. Under these assumptions I would assert you need to do a few things to make your markup "IE friendly."

First ensure that IE truly is running in IE8 Standards compatibility mode* by adding the following meta tag to your head section:

<meta http-equiv="x-ua-compatible" content="IE=8"/>

Immediately following the standards compatibility setting add a reference to html5shiv which is a JavaScript shiv for IE to recognize and style HTML5 elements:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Between these two changes you should be good to go. After the changes force IE to do a full resource refresh by pressing CTRL + F5.

* If this is a new web site you may want to consider using IE=edge as it tells Internet Explorer to use the highest mode available.

更多推荐

本文发布于:2023-07-31 01:37:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1340568.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:但在   动态   列表   Chrome   Firefox

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!