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

Question

我一直在尝试将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>

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

Answer 1

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

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

代替.

Answer 2

不确定,但尝试:

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

Answer 3

您不能按字符串分配事件。使用那个：

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

Answer 4

您还可以设置属性：

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

Answer 5

简短的回答：您想将处理程序设置为一个函数：

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

答案稍长：您必须多编写几行代码才能使其在浏览器之间一致地工作。

事实是，即使是稍微长一些的代码可以在一组常见浏览器中解决特定问题，但它仍然会带来自己的问题。因此，如果您不关心跨浏览器支持，请选择完全短的。如果您关心它并且绝对只想让这一件事情正常工作，请使用addEventListener和 的组合attachEvent。如果您希望能够在整个代码中广泛创建对象并添加和删除事件侦听器，并且希望跨浏览器工作，那么您肯定希望将该责任委托给 jQuery 等库。