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


77

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

现在,图像可以完美地在浏览器中绘制。但是,当我单击图像时,不会收到该警报。


1
噢,jQuery之美。也许将来会有所帮助:) $('。rvml')。live('click',function(){alert(1);});
丹尼尔·史洛夫

Answers:


159

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

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

代替。




6

您不能按字符串分配事件。使用:

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

4

简短的答案:您要将处理程序设置为一个函数:

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

答案略长:您必须再编写几行代码,才能使这些代码在浏览器中一致地工作。

事实是,即使是可能在一组通用浏览器中解决该特定问题的冗长代码,也仍然存在其自身的问题。因此,如果您不关心跨浏览器的支持,请选择完全简短的支持。如果你关心它,绝对只是想获得这一个单一的东西的工作,去组合addEventListenerattachEvent。如果您希望能够在整个代码中广泛地创建对象并添加和删除事件侦听器,并希望它们能够在浏览器中运行,那么您绝对希望将这种责任委托给jQuery之类的库。


1
我只需要Internet Explorer即可。.简短的作品就像魅力一样。不过,感谢您提供详细的解决方案
SolidSnake 2010年

2

我认为您无法通过这种方式进行操作。您应该使用:

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

文档在这里


0

您有三个不同的问题。首先,HTML标记中的值应加引号!不这样做可能会使浏览器感到困惑,并可能引起一些麻烦(尽管这里可能不是这样)。第二,实际上应该给函数分配onclick变量,正如其他人所指。这不仅是进行此操作的正确方法,而且如果您尝试在onclick函数中使用局部变量,它会使事情变得简单得多。最后,您可以尝试使用addEventListener或jQuery,jQuery具有更好的界面优势。

哦,请确保您的HTML可以通过验证!那可能是个问题。


我在本地使用。所以这对我来说不会是一个问题。.关于jQuery我不喜欢,因为我无法控制所有内容,而且它混乱不堪,包含许多代码,并且会影响其他javascript库。我宁愿构建自己的库,也不愿浪费时间弄清楚如何使用jQuery。谢谢您的帮助:)
SolidSnake 2010年

0

jQuery的:

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

要么:

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

该代码应向您发出响亮的警告。另外,您可以在其中添加一些解释,以便其他人可以从中学习吗?是什么elem内容?
Nico Haase

而且,如果您已阅读最受好评的答案,那么您也可以使用匿名函数编写代码来避免这个问题
Nico Haase

0

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

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

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


-2

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.