jQuery 追加功能在 Internet Explorer 8 中不起作用答案

【问题标题】：jQuery append function not working in Internet Explorer 8jQuery 追加功能在 Internet Explorer 8 中不起作用
【发布时间】：2013-03-17 05:07:50
【问题描述】：

这是我的代码-

$("body").append("<div>" +
                        "<ul>" +
                            "<li>" +
                                "<a href='javascript:void(0)' onclick='add()'>Add</a>" +
                            "</li>" +
                            "<li>" +
                                "<a href='javascript:void(0)' onclick='edit()'>Edit</a>" +
                            "</li>" +
                            "<li>" +
                                "<a href='javascript:void(0)' onclick='delete()'>Delete</a>" +
                            "</li>" +
                        "</ul>" +
                    "</div>");

在 IE8 中出现以下错误 - 网页错误详情

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Wed, 27 Mar 2013 07:03:53 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0

【问题讨论】：

去掉$()，只添加元素的字符串
这是这个问题的错字，已更正。
Problem with HTML Parser in IE的可能重复
你是在body标签里面同步做这个吗？如果是这样，请尝试将其包装在 $(document).ready(function(){/* here... */});

标签： javascript jquery internet-explorer-8 append

【解决方案1】：

如果要附加的元素是输入，则附加不起作用。为其他元素工作。

例子

<td id="V_DepTOTd"><input type="text" id="V_DepTO" /></td>

没用

$("#V_DepTO").append("`<input type='hidden' id='elementSelected' />`");

js 错误：意外调用方法或属性访问

工作

$("#V_DepTOTd").append("`<input type='hidden' id='elementSelected' />`");

在 IE8 和 jquery.min.js 1.9.1 中测试

【讨论】：

【解决方案2】：

我的建议是，转储该代码，维护起来会很糟糕。加上 append 采用原始 HTML。试试这个我认为“正确”的方法：

// All your functions organized in an object
var actions = {
  add: function() {  },
  edit: function() {  },
  delete: function() {  }
};

// Generate necessary html
var items = [];
for (var a in actions) {
  items.push('<li data-item="'+ a +'"><a href="#"></a></li>');
}

// Handle events 
var $items = $(items.join('')).click(function(e) {
  e.preventDefault(); // similar to "javascript:void"
  actions[$(this).data('item')]();
});

// Append to DOM
$('body').append($('<div><ul></ul></div>').find('ul').append($items)));

这将更容易维护，因为它现在都是动态的。我建议对您的项目也使用有意义的类，即。 “编辑”、“添加”、“删除”，因此您可以更轻松地在 CSS 中定位它们。

【讨论】：

你说得对，但我觉得我们需要先学会走路，然后才能……走得更快。我认为 Zaheer 在这种情况下实际上已经找到了问题的根源。我这么说，你知道，无法访问 IE8... =)
是的，我猜...这更像是“如何做得更好”，而不是为实际问题找到解决方案。我要说的是不值得解决 OPs 问题，因为该代码很脏，会导致更多脏问题。

【解决方案3】：

您需要在页面加载完成后执行此操作（因为 IE8 需要时间来呈现并执行 JavaScript）：

$(document).ready(function()
{
   $("body").append("<div>" +
                    "<ul>" +
                        "<li>" +
                            "<a href='javascript:void(0)' onclick='add()'>Add</a>" +
                        "</li>" +
                        "<li>" +
                            "<a href='javascript:void(0)' onclick='edit()'>Edit</a>" +
                        "</li>" +
                        "<li>" +
                            "<a href='javascript:void(0)' onclick='delete()'>Delete</a>" +
                        "</li>" +
                    "</ul>" +
                "</div>");
});

【讨论】：

我认为这是解决方案，因为它说在正文关闭之前您不能附加到正文，因此它可能会在文档中的任何位置执行代码，这非常像之前关闭