将onclick事件添加到JavaScript中新添加的元素

时间:2010-07-23 07:39:47

标签: javascript events new-operator element add

我一直在尝试将onclick事件添加到我用JavaScript添加的新元素中。

问题是当我检查document.body.innerHTML时,我实际上可以看到onclick = alert('blah')被添加到新元素中。

但是当我点击该元素时,我看不到警报框正在工作。实际上任何与JavaScript相关的东西都不起作用..

这是我用来添加新元素的内容:

function add_img() { 
  var elemm = document.createElement('rvml:image'); 
  elemm.src = 'blah.png';
  elemm.className = 'rvml';
  elemm.onclick = "alert('blah')";
  document.body.appendChild(elemm);
  elemm.id = "gogo";
  elemm.style.position='absolute';
  elemm.style.width=55;
  elemm.style.height=55;
  elemm.style.top=200;
  elemm.style.left=300;
  elemm.style.rotation=200; 
}

以下是我如何调用此函数:

<button onclick=add_img()>add image</button>

现在,图像在浏览器中完美呈现。但是当我点击图像时,我没有得到警报。

10 个答案:

答案 0 :(得分:122)

应将

.onclick设置为函数而不是字符串。尝试

elemm.onclick = function() { alert('blah'); };

代替。

答案 1 :(得分:14)

不确定但请尝试:

elemm.addEventListener('click', function(){ alert('blah');}, false);

答案 2 :(得分:6)

您还可以设置属性:

elem.setAttribute("onclick","alert('blah');");

答案 3 :(得分:4)

您无法按字符串分配事件。使用:

elemm.onclick = function(){ alert('blah'); };

答案 4 :(得分:2)

简答:你想把处理程序设置为一个函数:

elemm.onclick = function() { alert('blah'); };

稍微长一点的答案:你必须再写几行代码才能让它在浏览器中保持一致。

事实上,即使是在一组常见浏览器中可能解决该特定问题的更长时间的代码仍会出现其自身的问题。因此,如果您不关心跨浏览器支持,请选择完全短的支持。如果您关心它并且绝对只想让这一件事工作,请使用addEventListenerattachEvent的组合。如果您希望能够在整个代码中广泛创建对象并添加和删除事件侦听器,并希望它能够跨浏览器工作,那么您肯定希望将该职责委托给诸如jQuery之类的库。

答案 5 :(得分:2)

我认为你不能这样做。你应该使用:

void addEventListener( 
  in DOMString type, 
  in EventListener listener, 
  in boolean useCapture 
); 

文档right here

答案 6 :(得分:0)

你有三个不同的问题。首先,应引用HTML标记中的值!不这样做可能会混淆浏览器,并可能导致一些麻烦(虽然这可能不是这种情况)。其次,您应该实际为onclick变量分配一个函数,就像其他人所说的那样。这不仅是正确的方法,而且如果你试图在onclick函数中使用局部变量,它会使事情变得更简单。最后,您可以尝试使用addEventListener或jQuery,jQuery具有更好的界面优势。

哦,确保你的HTML验证!这可能是一个问题。

答案 7 :(得分:0)

不能说为什么,但是es5 / 6语法不起作用

elem.onclick = (ev) => {console.log(this);}不起作用

elem.onclick = function(ev) {console.log(this);}工作

答案 8 :(得分:-1)

jQuery:

elemm.attr("onclick", "yourFunction(this)");

或:

elemm.attr("onclick", "alert('Hi!')");

答案 9 :(得分:-2)

如果您不想编写曾在您调用的函数中编写的所有代码。请使用以下代码,使用jQuery:

  

$(element).on('click',function(){add_img();});