Javascript IE不允许在动态创建的DOM';a';要素

Javascript IE不允许在动态创建的DOM';a';要素,javascript,css,internet-explorer,firefox,events,Javascript,Css,Internet Explorer,Firefox,Events,我在使用internet Explorer时遇到问题。我有一个链接,它在表单上复制了一个文件上传元素。复制的代码还向复制的upload元素添加了一个超链接,该元素应该删除复制的元素,只需删除此链接 问题是,这段代码在firefox中运行良好,但在IE中根本不运行。忘记代码是如何写出的吧——我附加到元素上的onClick事件根本不会触发 我正在函数中创建我的移除链接元素,如下所示: var a = document.createElement('a'); a.setAttribute('href'

我在使用internet Explorer时遇到问题。我有一个链接,它在表单上复制了一个文件上传元素。复制的代码还向复制的upload元素添加了一个超链接,该元素应该删除复制的元素,只需删除此链接

问题是,这段代码在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 inspector检查了dom,链接呈现得很好,但是附加到它的类没有呈现或应用,事件也没有触发,即使它已实际附加到html上的链接。出于某种原因,onClick事件甚至不会触发,无论我在其中输入了什么代码,即使它是一个警报。我是不是遗漏了什么(


很好,通过使用AddEvent附加事件解决了问题的第一部分,但是为什么css不呈现?我的意思是,附加到元素的类由于一些奇怪的原因根本不呈现:(


确实是个好建议-我正在重写代码以避免setAttribute函数,而是将所有DOM操作移植到jquery。感谢大家的帮助,

事件处理程序不是DOM属性,该属性仅存在于标记中-我不确定为什么FF会这样做。我现在就去研究一下,因为我想知道

Update:关于EvthDand的属性是否是DOM有效的似乎是复杂的感觉。在我看来,这是MS的错误,因为它们内部不把它们当作属性,而HTML规范表明它们是非常重要的。IE中的setAttribute包括eventhandler绑定,重要的是还有样式、类和名称。显然IE8解决了这个问题,但我还没有安装,所以我无法检查

同时,对于事件绑定,使用pair,或者(因为它是直接赋值,所以不太合适)将a.onclick直接设置到目标方法(或者更可能是方法上的闭包)

要修复未正确应用的样式,请使用
element.style=foo;
或(更好的)
element.className=bar

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


正如annakata所说,您应该使用addEventListener/attachEvent。但是,如果您不想设置onclick direct,您可以使用:

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

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

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

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

如果您正在寻找可重用的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 );
  }
就这么做吧

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

fwiw,我没有提供代码,因为OP也没有:)我不知道“this”或“idOfParentContainer”是什么是的,所以我不能说这个闭包是否有效。哇!这意味着firefox一直都是错误的!但是我如何附加一个我希望传递参数的函数-我在这里似乎看不到任何这样的例子。FF可能是错误的,我还在看。你可以使用闭包有效地传递参数:Pim说明了可能会发生什么比如,如果不看更多的代码,我不能确定,但是谷歌的“javascript闭包”更多信息。我得到了它来处理参数-但仍然想知道如果我需要将参数传递给附加到事件的函数,我将如何处理它。我也不明白为什么css和样式没有在IE上呈现它们应该呈现的样子。我想你必须提供更多代码来解决这个问题,但正如我所说的g对要传递的参数进行闭包是将参数干净地放入事件处理程序的唯一方法。其他可能性包括将参数数据绑定到DOM元素,并在基于event.target/src元素处理事件时检索它,当然jquery中会有一些包装器用于所有这些有很多代码可以完成这一切-我只是使用set Attribute函数设置属性。它的呈现方式使其显示,但不应用样式-但是,如果我在innerHTML中播放脏代码和硬代码,它工作正常:-S