Question

我遇到了Internet Explorer的问题。我有一个链接，它复制表单上的文件上传元素。重复的代码还会向重复的上传元素添加一个超链接，该元素应该删除重复的元素，只需删除此链接即可。

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

我在函数中创建了这样的remove链接元素：

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。感谢帮助人员

Answer 1

~~事件处理程序不是DOM属性，该属性仅存在于标记中 - 我不确定为什么FF会这样做。我将继续研究，因为我想知道。~~

更新：似乎对eventhandler是否是DOM有效属性感到复杂。在我看来这是MS的错，因为他们内部不会将它们视为属性，而HTML规范表明它们非常多。这样做的直接后果是很多东西！IE会考虑在IE中使用setAttribute设置属性，包括eventhandler绑定，重要的是样式，类和名称。显然IE8修复了这个，但我还没有安装，所以我无法检查。

同时，对于事件绑定，请使用addEventListener/attachEvent对，或者（不太优选，因为它是直接赋值）将a.onclick直接设置为目标方法（或者更可能是方法的闭包）。

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

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

For reference...

Answer 2

正如annakata所说，你应该使用addEventListener / attachEvent。但是，如果你不想直接设置onclick，你可以使用：

  a.onclick = function() { removeThisElement(idOfParentContainer, this); };

Answer 3

只需这样做

var element = document.createElement("input");
element.class = "className";
element.style.display = "none";
element.style.position = "absolute";
element.id = "someid";
element.type = "file";
element.onchange = function(){
                   // do onchange functions here
                   }
// do the following that removes all browser dependecies
$(document.body).append(element);
$("#someid").click(); //click the button programatically using its id
$(element).remove(); // remove the element

Answer 4

实际上，出于跨浏览器的目的，最好使用Jquery。

$('#exampleCA').createAppend("a", { href: '#', style: "background-color: red;", onclick: 'alert (1);' }, "aaabbb");

这将创建带有文本aaabbb，href =“＃”，红色背景和警告事件的标记以供点击。

Answer 5

如果您正在寻找可重复使用的X浏览器解决方案，以下功能适用于IE，FF和Opera：

  function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
      obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
      obj.addEventListener( type, fn, false );
  }

IE不允许onClick事件动态创建DOM'a'元素

5 个答案: