Question

我有一些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);
});

Answer 1

由于您使用的是section元素，我猜您正在使用其他HTML5元素并使用HTML5文档类型：<!DOCTYPE html>。在这些假设下，我认为你需要做一些事情来使你的标记“IE友好。”

首先通过在您的主要部分添加以下元标记来确保IE真正在IE8 Standards compatibility mode ^*中运行：

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

立即按照标准兼容性设置添加对html5shiv的引用，这是一个用于IE的JavaScript shiv，用于识别和设置HTML5元素的样式：

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

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

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

为什么动态添加列表项在Chrome和Firefox中有效但在IE8中无效？

1 个答案: