我有一些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.
更多推荐
发布评论