将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

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

$（element）.on（'click'，function（）{add_img（）;}）;

Answer 3

不确定，但尝试：

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

Answer 4

您还可以设置属性：

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

Answer 5

你不能按字符串分配事件。使用：

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

Answer 6

简短回答：您希望将处理程序设置为函数：

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

稍微长一点的回答：你将不得不再编写几行代码来使其在浏览器中保持一致。

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

Answer 7

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

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

文档right here。

Answer 8

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

哦，并确保您的HTML验证！这可能是一个问题。

Answer 9

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

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

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

Answer 10

JQuery的：

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

要么：

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