javascript 对象不支持 IE9 中的属性或方法“追加”

Object doesn't support property or method 'append' in IE9

提问by JoeLee

this script is working in firefox or chrome but only gets half way in IE9 which is the top browser for our websites.

这个脚本在 firefox 或 chrome 中工作，但在我们网站的顶级浏览器 IE9 中只能运行一半。

the problem im getting is its throwing this error.

我得到的问题是它抛出这个错误。

SCRIPT438: Object doesn't support property or method 'append' calc_ajax.js, line 26 character 21

SCRIPT438：对象不支持属性或方法“附加”calc_ajax.js，第 26 行字符 21

on this line: item.append(link);

在这一行： item.append(link);

and im stuck why. any help would be appreciated.

我坚持为什么。任何帮助，将不胜感激。

$(document).ready(function(){
$('.first a.btn').click(function(){
    $('.first a.active').removeClass('active');
    $(this).addClass('active');
    $('.second .title').addClass('active');

    var id = $(this).data('cat-id');

    var wrap = $('<div>');

    $.ajax({
        url:    script_url,
        type:   "post",
        data: {"cat": id},
        dataType: "json"
    }).success(function(result){
        if(result.status == "ok"){
            $.each(result.data, function(i, elem){
                item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
                link = $("<a href='#results' class='btn'>");
                link.text(elem.name);
                link.data('subcat-id', elem.id);
                item.append(link);

                wrap.append(item);

            });
            $('.second .body').html(wrap).slideDown('fast');
        }
    });
});

$('.second a.btn').live('click', function(){
    $('.second .body-area.active').removeClass('active');
    $(this).parent().addClass('active');

    var sub_id = $(this).data('subcat-id');        

    $.ajax({
        url:    script_url,
        type:   "post",
        data: {"subcat": sub_id},
        dataType: "json"
    }).success(function(result){
        if(result.status == "ok"){
            $('.third .title').text(result.data.title);
            $('.third .body').html(result.data.body);
            $('.third').slideDown('fast'); 
        }
    });        
});

});

});

回答by Elijah Manor

window.itemis a special method in Internet Explorer and since the code you pasted wasn't declaring a local variable itemit was trying to reassign a native method in IE. IE didn't allows the reassignment to happen so you didn't really get the jQuery object you were expecting in the itemvariable and therefore the appendmethod isn't available.

window.item是 Internet Explorer 中的一种特殊方法，由于您粘贴的代码未声明局部变量，item因此它试图在 IE 中重新分配本机方法。IE 不允许重新分配发生，因此您并没有真正在item变量中获得您期望的 jQuery 对象，因此该append方法不可用。

The easiest way to fix the code is to add a varright before you use the itemvariable. I've thrown together a jsFiddle showing how it fixes the issue in IE http://jsfiddle.net/httyY/

修复代码的最简单方法是var在使用item变量之前添加一个权限。我已经将一个 jsFiddle 放在一起，展示了它如何解决 IE http://jsfiddle.net/httyY/ 中的问题

$.ajax({
    url:    script_url,
    type:   "post",
    data: {"cat": id},
    dataType: "json"
}).success(function(result){
    if(result.status == "ok"){
        $.each(result.data, function(i, elem){
            var item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
            var link = $("<a href='#results' class='btn'>");
            link.text(elem.name);
            link.data('subcat-id', elem.id);
            item.append(link);

            wrap.append(item);

        });
        $('.second .body').html(wrap).slideDown('fast');
    }
});

回答by Fabian von Ellerts

I got the same error on IE11 when using the native function document.body.append.

使用本机功能时，我在 IE11 上遇到了同样的错误document.body.append。

You can either use document.body.appendChildor insert the polyfill from MDN(npm).

您可以使用document.body.appendChild或插入来自 MDN( npm) 的polyfill。

回答by Sudhir Bastakoti

try:

尝试：

$.each(result.data, function(i, elem){
   var item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
   var link = $("<a />", {"href" :"#results", "class": "btn"});
   link.text(elem.name);
   link.data('subcat-id', elem.id);
   item.append(link);
   wrap.append(item);    
});