javascript - jQuery 追加功能在 Internet Explorer 8 中不起作用

Question

这是我的代码-

$("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

Answer 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 中测试

Answer 2

您需要在页面加载完成后执行此操作（因为 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>");
});

Answer 3

我的建议是，转储该代码，维护起来会很糟糕。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)));

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