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

【问题标题】：IE not allowing onClick event on dynamically created DOM 'a' elementIE 不允许动态创建的 DOM 'a' 元素上的 onClick 事件
【发布时间】：2016-06-07 14:36:52
【问题描述】：

我在使用 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。谢谢大家的帮助

【问题讨论】：

标签： javascript css internet-explorer firefox events

【解决方案1】：

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

更新：对于事件处理程序是否是 DOM 有效属性似乎有些复杂。在我看来这是 MS 的错，因为它们在内部不将它们视为属性，而 HTML 规范表明它们非常重要。这样做的直接后果是许多事情！IE 会认为属性不能在 IE 中使用 setAttribute 设置，包括事件处理程序绑定，重要的是还有样式、类和名称。显然 IE8 解决了这个问题，但我还没有安装，所以我无法检查。

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

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

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

For reference...

【讨论】：

哇！所以这意味着firefox一直都错了！但是我如何附加一个我希望传递参数的函数 - 我似乎在这里看不到任何这样的例子。
FF 可能错了，我还在看。您可以使用闭包有效地传递参数：Pim 说明了这可能是什么样子，如果没有看到更多代码就无法确定，但谷歌“javascript 闭包”以获取更多信息。
我让它在没有参数的情况下工作 - 但仍然想知道如果我需要将参数传递给附加到事件的函数，我将如何处理它。我也不明白为什么 css 和样式不能在 IE 上按应有的方式呈现。
我认为你必须为我们提供更多代码来解决这个问题，但正如我所说，在要传递的参数上创建一个闭包是将参数干净地放入事件处理程序的唯一方法。其他可能性包括将参数数据绑定到 DOM 元素并在处理基于 event.target/srcElement 的事件时检索它，当然在 jquery 中会有一些包装器。
事实上，这几乎就是完成这一切的代码 - 我只是使用 set Attribute 函数设置属性。它呈现为显示但不应用样式 - 但是，如果我在 innerHTML 中播放脏代码和硬代码，它可以正常工作：-S

【解决方案2】：

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

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

【讨论】：

fwiw，我没有提供代码，因为 OP 也没有:) 我不知道“this”或“idOfParentContainer”是什么，所以我不能说这个关闭是否会工作。

【解决方案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

【讨论】：

【解决方案4】：

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

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

这将创建带有文本 aaabbb、href = "#"、红色背景和点击警报事件的标签。

【讨论】：

【解决方案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 );
  }

【讨论】：