简体   繁体   English

JavaScript IE appendChild() - 对方法或属性访问的意外调用

[英]JavaScript IE appendChild() - Unexpected call to method or property access

I have been having this problem in IE. 我在IE中遇到过这个问题。 I have two divs which I use to drag selected elements from one to another. 我有两个div用于将所选元素从一个拖到另一个。 Lets say I have a child element (also a div) in div1 and some child elements in div2. 假设我在div1中有一个子元素(也是div),在div2中有一些子元素。 I call the div2.appendChild() method on child element of div1. 我在div1的子元素上调用div2.appendChild()方法。 It removes the child from div1 and appends it to div2. 它从div1中删除子项并将其附加到div2。 If I then try to append the child back to div1 I get the following exception "Unexpected call to method or property access" in IE. 如果我然后尝试将子项追加到div1,我在IE中得到以下异常“对方法或属性访问的意外调用”。 It is working perfectly in firefox. 它在firefox中运行得很好。 See below code snippet for the javascript. 请参阅以下javascript的代码段。

function moveSelectedGroupBoxItems(toLocation, grp){
    document.body.className = 'groupBoxDefaultCursor';
    if(groupBoxfromLocation != toLocation){
        if(grp == groupBoxGroup){
            var fromVal = document.getElementById(groupBoxfromLocation);
            var toVal = document.getElementById(toLocation);

            var children = fromVal.childNodes;
            for (var i = children.length - 1; i >= 0; i--) {
                if(children[i].className == 'groupBoxItemSelected'){
                    children[i].childNodes[0].name=toLocation;
                    toVal.appendChild(children[i]);
                }
            }
        }
    }
    groupBoxfromLocation = '';
    groupBoxGroup = '';
    return false;
}

This basically moves the selected child divs from one parent div to another on dragging. 这基本上在拖动时将所选子div从一个父div移动到另一个父div。

For search results benefits - I had this same error in IE 6 and 7 "Unexpected call to method or property access" when appending a child node to a namespaced element, but the namespace hadn't been declared. 对于搜索结果的好处 - 在将子节点附加到命名空间元素时,我在IE 6和7“意外调用方法或属性访问”中遇到了同样的错误,但是尚未声明命名空间。

var a=document.createElement("foo:blah");
var b=document.createElement("div");
a.appendChild(b); //Fails

To get around this, I had to add the namespace declaration either into the HTML code: 为了解决这个问题,我不得不将命名空间声明添加到HTML代码中:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo>

or dynamically via javascript (Probably should be wrapped in try/catch): 或通过javascript动态(可能应该包装在try / catch中):

var namespaces = document.namespaces;
if(namespaces) {
    namespaces.add("foo", null, null);
}

I had this issue in IE7 and it turned out to be that the IE7 DOM was not perfect. 我在IE7中遇到过这个问题,结果证明IE7 DOM并不完美。

In my case I had an image tag rendered by the ASP.NET MCV TagBuilder, which rendered it as: 在我的例子中,我有一个由ASP.NET MCV TagBuilder呈现的图像标记,它将其呈现为:

<img ...></img>

Note the ending tag there and that was what caused the problem. 注意那里的结束标记,这就是导致问题的原因。 It worked when rendered as: 它在渲染时起作用:

<img ... />

Hope this helps. 希望这可以帮助。

I agree with Kaze noe Koe, dynamically setting the name of elements is not the most bullet-proof practice. 我同意Kaze noe Koe,动态设置元素的名称并不是最防弹的做法。 Unfortunately, I cannot tell you how to get rid of the error. 不幸的是,我无法告诉你如何摆脱错误。 However, I highly recommend using a JavaScript library (jQuery, Prototype, Dojo, ...). 但是,我强烈建议使用JavaScript库(jQuery,Prototype,Dojo,...)。 They are quite small, relatively easy to learn, and much more convenient to use than the horrible DOM API. 它们非常小,相对容易学习,并且比可怕的DOM API更方便使用。 Last but not least, they shield you from many such awkward Browser incompatibilities. 最后但同样重要的是,它们可以保护您免受许多此类尴尬的浏览器不兼容问题的影响。 Give it a try, after a couple of days you cannot imagine going back, I promise. 尝试一下,经过几天你无法想象回去,我保证。

Are you sure it isn't dying on: 你确定它没有死亡:

children[i].childNodes[0].name=toLocation;

What are you trying to accomplish with this line? 你想用这条线做什么?


Seriously, try to comment it out. 说真的,试着评论一下。 I don't even think it is what you think it is - isn't the right property called nodeName ? 我甚至不认为它是你认为的 - 是不是名为nodeName的正确属性?

children[i].childNodes[0].name=toLocation; 儿童[I] .childNodes [0]。名称= toLocation;

Each child div contained in the parent div also contains a hidden input value. 父div中包含的每个子div也包含隐藏的输入值。 The parent divs do not contain a name attribute, only an id. 父div不包含name属性,只包含id。 When the child divs are dragged from one parent div to another parent it updates the name value of all the hidden inputs to the divs id. 当子div被从一个父div拖到另一个父div时,它会更新divs id的所有隐藏输入的名称值。 When the form is submitted the server can then distinguish which values were present in the specific parent div. 提交表单后,服务器可以区分特定父div中存在哪些值。 This works in IE and Firefox without fail thus far. 到目前为止,这在IE和Firefox中都可以正常使用。 The problem definately lies within the appendChild() method as it keeps breaking on this statement. 问题肯定在于appendChild()方法,因为它在这个语句上不断破坏。 If a parent div is empty at load everything works perfectly. 如果父div在加载时为空,则一切正常。 If a parent divs children are appended to a different div and then back again I get the exception in IE only. 如果父div将子项附加到不同的div然后再返回我只在IE中获得异常。

Unfortunately I cannot implement a framework as of yet. 不幸的是,我还没有实现框架。 Our tags frequently change to accomodate new requirements. 我们的标签经常更改以适应新的要求。

Thanks for your replies on my topic, hope this makes more sense now. 感谢您对我的主题的回复,希望现在更有意义。

Cheers 干杯

Grep grep的

SOLVED!... sort of I had hidden inputs within the child divs which stored the id of the item being moved for form submission. 已解决!...我在子div中隐藏了一些输入,这些输入存储了为表单提交而移动的项目的id。 I removed the hidden inputs and placed them underneath my selectionboxes. 我删除了隐藏的输入并将它们放在我的选择框下面。 Each time an div is moved it updates the name of the hidden to the parent divs id. 每次移动div时,它都会将隐藏的名称更新为父divs id。 It seems IE has a problem with appendChild() when the node has children. 当节点有子节点时,似乎IE有appendChild()的问题。 This did sometimes work and sometimes it failed. 这确实有效,有时失败。 Appending a single element with no children always works. 添加没有子元素的单个元素始终有效。 I am not sure exactly what the problem was, but the above sorted it out. 我不确定问题究竟是什么,但上面已将其整理出来。

Cheers 干杯

Grep grep的

just had the same problem with IE7, cured it by adding a timeout: 与IE7有同样的问题,通过添加超时来治愈它:

setTimeout(function(){gallery.appendChild(g_field)},300);

I've lost count of the no of times something doesn't work in IE but works perfectly in Firefox that can be solved by a short delay...no idea why! 我已经失去了在IE浏览器中无法正常运行但在Firefox中可以通过短暂延迟解决的完美工作...不知道为什么!

Sorry! 抱歉! spoke to soon...turns out my timeout (in this case) didn't work. 很快就说了......结果我的超时(在这种情况下)没有用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM