IE不允许onClick事件动态创建DOM'a'元素 [英] IE not allowing onClick event on dynamically created DOM 'a' element

问题描述

我有Internet Explorer的问题。我有一个链接，复制表单上的文件上传元素。复制的代码还会附加到重复的上传元素的超链接，该元素应该删除重复的元素，一个简单的删除此链接。

问题是这个代码运行正常在Firefox中，但是它根本不运行在IE中。忘记代码如何写出 - 我附加到元素的onClick事件根本不触发！

我正在创建我的删除链接元素，如下所示：

  var a = document.createElement（'a'）; 
 a.setAttribute（'href'，javascript：void（0）;）; 
 a.setAttribute（'class'，'delete'）; 
 a.setAttribute（'onClick'，'removeThisElement（idOfParentContainer，this）'）; 
 
 container.appendChild（a）; 
  

这在Firefox中工作正常，但在IE中根本不会启动。我使用IE检查器检查了dom，该链接已经很好地呈现，但是附加到它的类没有呈现或应用，即使实际上已经附加到html上的链接也没有触发该事件。由于某种原因，即使它的警报，onClick事件甚至不会发射，无论我放入哪个代码。我在这里遗漏了一些东西：（

---

很好，通过使用AddEvent附加事件解决了问题的一部分，为什么不是css渲染意味着附加到元素的类不会渲染出一些奇怪的原因：（

---

我重写我的代码以避免使用setAttribute函数，并将所有这些DOM操作移植到jquery。感谢您的帮助。

解决方案

事件处理程序不是DOM属性，属性仅在标记中存在 - 我不知道为什么FF这样，我会去研究，现在我想知道。

更新：对于是否有事件处理程序是DOM有效的属性似乎是混合的感觉看起来像我这样的MS的错误，因为他们内部不把它们当作属性，而HTML规范他们非常多，这样做的直接后果就是IE会考虑一些事情er属性无法在IE中使用setAttribute进行设置，包括事件处理程序绑定，并且重要地也是样式，类和名称。显然，IE8修复了这个，但是我还是没有安装，所以我无法检查。

同时，对于事件绑定使用 addEventListener / attachEvent 对，或者（最好是因为它是直接赋值）将a.onclick直接设置为您的目标方法（或更有可能您的方法关闭。）

要修正您的样式未正确应用使用 element.style = foo; 或（更好） element.className = bar 。

本质上问题是setAttribute。避免使用它。

参考...

I'm having issues with internet Explorer. I have a link which duplicates a file upload element on a form. The code which duplicates also appends a hyperlink to the duplicated upload element which is supposed to remove the duplicated element a simple remove this link.

The issue is that this code runs fine in firefox but it doesn't run at all in IE. Forget how the code is written out - the onClick event which I attach to the element doesn't fire at all!

I'm creating my remove link element like this in the function:

var a = document.createElement('a');
a.setAttribute('href', "javascript:void(0);");
a.setAttribute('class', 'delete');
a.setAttribute('onClick', 'removeThisElement(idOfParentContainer, this)');

container.appendChild(a);

This works fine in firefox but it doesn't fire at all in IE. I checked the dom using IE inspector and the link has rendered nicely however the class attached to it hasn't rendered or been applied and neither has the event fired even though it has physically been appended to the link on the html. For some reason the onClick event is not even firing no matter what code I put in it even if its an alert. Am I missing something here. :(

---

Great got part one of the issue solved by attaching events using AddEvent however why isn't the css rendering I mean the class attached to the element doesn't render at all for some weird reason :(

---

Good advice indeed - I'm rewriting my code to avoid the setAttribute function and instead porting all this DOM manipulation to jquery. Thanks for the helps guys

解决方案

Event handlers are not DOM attributes, the attribute exists in markup only - I'm not sure why FF oks this. I'll go research that now cause I want to know.

Update: seems to be mixed feelings about whether eventhandlers are DOM-valid attributes or not. Looks to me like this is MS's fault as they internally do not treat them as attributes, whilst the HTML spec indicates that they very much are. The direct consequences of this are that a number of things !IE would consider attributes cannot be set with setAttribute in IE including eventhandler bindings and importantly also style, class and name. apparently IE8 fixes this but I still haven't installed that so I can't check.

Meanwhile, for event binding use the addEventListener/attachEvent pair instead, or (less preferably because it's a direct assignment) set a.onclick directly to your target method (or more likely a closure on your method).

To fix your styling not being correctly applied use element.style = foo; or (better) element.className = bar.

Essentially the problem is setAttribute. Avoid using it.

For reference...

这篇关于IE不允许onClick事件动态创建DOM'a'元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！