在JavaScript中为新添加的元素添加onclick事件

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>

现在这张图片在浏览器中可以完美绘制。但是当我点击这张图片时，我没有收到那个警告提示。

- Desolator

---

哦，jQuery的美妙之处啊。也许将来会有所帮助 :) $('.rvml').live('click', function() { alert(1); }); - Daniel Sloof

Answer 1

.onclick 应该设置为一个函数，而不是一个字符串。尝试：

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

改为使用 "instead"。

- kennytm

---

太棒了！但是现在，假设我想让处理程序带一个参数怎么办？如果我把参数（比如一个对象）放在 elemn.onclick = function(foo) {myHandler(foo.bar);}; 中，当我到达 myHandler 时，好像参数从来没有出现过一样。 - Tim Erickson

@TimErickson 你可以在函数内使用 this 关键字来访问元素。例如：elem.onclick = function () { alert(this.id);} - sketchyTech

Answer 2

您还可以设置属性：

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

- bonafernando

---

有趣的方法！ - Pedro Carrera

这个特定的方法 "setAttribute()" 在只想插入一个特定属性及其对应值作为字符串时非常有用。 - Ron Zhang

Answer 3

不确定，但尝试一下：

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

- Boris Delormas

---

即使使用.addEventListener，第二个参数仍然需要是一个函数而不是一个字符串。 - kennytm

使用jQuery，我不记得这个 ;) - Boris Delormas

这很好，因为它保留了现有的事件处理程序。 - Cees Timmerman

Answer 4

你不能通过字符串来分配事件。使用这个：

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

- MinhNguyen

Answer 5

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

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

稍微长一点的回答是：您需要编写更多的代码才能使其在各种浏览器中保持一致性。

事实上，即使是可能解决一组常见浏览器中的特定问题的稍长一些的代码也会带来自己的问题。因此，如果您不关心跨浏览器支持，请使用完全简短的方法。如果您关心它并且绝对只想让这一个单独的事情起作用，请使用addEventListener和attachEvent的组合。如果您想在整个代码中广泛地创建对象并添加和删除事件侦听器，并希望在各种浏览器中运行，请确保将该责任委托给jQuery等库。

- David Hedlund

---

我只需要這個在Internet Explorer上運行... 簡短的方法非常好用。雖然感謝您提供詳細的解決方案。 - Desolator

Answer 6

我认为你不能用这种方式来做。你应该使用：

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

文档在这里。

- Guillaume Lebourgeois

Answer 7

不知道为什么，但 ES5/6 语法无效

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

elem.onclick = function(ev) {console.log(this);} 可行

- bresleveloper

Answer 8

JQuery：

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

或者：

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

- Alex

---

那段代码应该会向你发出大声的警告。另外，你能否添加一些解释，以便其他人可以从中学习？elem包含什么？ - Nico Haase

如果你已经阅读了最受欢迎的答案，你也会使用匿名函数编写代码来避免这个问题。 - Nico Haase

Answer 9

你有三个不同的问题。首先，HTML标签中的值应该用引号括起来！不这样做会让浏览器混淆，并可能导致一些麻烦（虽然在这种情况下可能不是这样）。其次，你应该将一个函数分配给onclick变量，就像别人提到的那样。不仅这是未来正确的做法，而且如果你尝试在onclick函数中使用局部变量，这将使事情变得更简单。最后，你可以尝试添加事件侦听器或使用jQuery，jQuery具有更好的界面优势。

哦，还要确保你的HTML验证通过！那可能是个问题。

- crazy2be

---

我是在本地使用这个，所以对我来说不是问题。 关于jQuery，我不喜欢它，因为我无法完全控制它，而且它有很多混乱的代码，并且会影响其他JavaScript库。我更愿意建立自己的库，而不是浪费时间去弄清楚如何使用jQuery。 还是谢谢你的帮助 :) - Desolator