javascript jQuery 附加功能在 Internet Explorer 8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15653424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery append function not working in Internet Explorer 8
提问by Ashwin
Here is my code-
这是我的代码-
$("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>");
In IE8 I am getting following error - Webpage error details
在 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
回答by Zaheer Ahmed
you need to do this after page load completed (because IE8 takes time to render and JavaScript get executed):
您需要在页面加载完成后执行此操作（因为 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>");
});
回答by sjdms265
for me append didn't work if the element to append was a input. For other elements work.
对我来说，如果要附加的元素是输入，则 append 不起作用。对于其他元素的工作。
Example
例子
<td id="V_DepTOTd"><input type="text" id="V_DepTO" /></td>
didn't work
没用
$("#V_DepTO").append("`<input type='hidden' id='elementSelected' />`");
js error: unexpected call method or property acces
js 错误：意外的调用方法或属性访问
work
工作
$("#V_DepTOTd").append("`<input type='hidden' id='elementSelected' />`");
Tested in IE8 and jquery.min.js 1.9.1
在 IE8 和 jquery.min.js 1.9.1 中测试
回答by elclanrs
My advice, dump that code, that's going to be terrible to maintain. Plus appendtakes raw HTML. Try this I think "proper" approach:
我的建议是，转储该代码，维护起来会很糟糕。Plusappend采用原始 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)));
That will be much easier to maintain because it's all dynamic now. I would suggest using meaningful classes as well for your items, ie. "edit", "add", "delete", so you can target them in CSS more easily.
这将更容易维护，因为它现在都是动态的。我建议也为您的项目使用有意义的类，即。“编辑”、“添加”、“删除”，因此您可以更轻松地在 CSS 中定位它们。
