创建元素时 Onclick 事件不起作用答案

【问题标题】：Onclick event not working when creating elements创建元素时 Onclick 事件不起作用
【发布时间】：2014-01-28 10:58:13
【问题描述】：

我正在使用此代码添加元素，并且 onclick 事件运行良好：

$("#main").before('<ul class=\"breadcrumb\"><li><a href=\"javascript:;\" onclick=\"Search(\'' + "/" + '\')\"><span>Home</span></a></li></ul>');

但我不再使用 jQuery，并且使用下面的代码，onclick 事件不会触发。知道为什么会这样吗？

var breadcrumb = document.createElement('ul');
breadcrumb.className = 'breadcrumb';

var element = document.createElement('li');

var elementlink = document.createElement('a');
elementlink.onclick = function () { 
    Search("/"); 
    return false;
};

var elementspan = document.createElement('span');
elementspan.innerHTML = 'Home';

elementlink.appendChild(elementspan);
element.appendChild(elementlink);
breadcrumb.appendChild(element);

document.getElementById('main').insertBefore(breadcrumb, null);

【问题讨论】：

未触发..元素显示正常。为了以防万一，我尝试使用 alert() 而不是我的函数，但它也在触发
能否指定解决方案是纯js还是jquery。
我不再使用 jquery
@nhenrique jsfiddle.net/mF3KZ ???
这很奇怪..它仍然不适合我

标签： javascript jquery events onclick createelement

【解决方案1】：

添加一个监听器而不是设置元素的 onclick 属性。

显然它应该可以工作：http://jsfiddle.net/6gb2k/

试试：

elementlink.addEventListener('onclick', function(e) { ... }, false);

或更清洁：

var handleClick = function(e) {
    ...
}
elementlink.addEventListener('onclick', handleClick, false);

根据@crush 的评论和我的小提琴，您上面的代码应该可以工作。

【讨论】：

您可以，in fact，直接设置onclick 属性。使用addEventListener 肯定是更好的做法，因为您不知道还有哪些其他点击事件可能会绑定到该对象。
谢谢@crush 我改变了答案，请删除你的反对票。
@crush 你的小提琴似乎不适合我 Chrome 31
这应该是正确的答案..奇怪的是，我在所有代码中都使用 onclick 事件来做这种事情。就在这里，它不工作..这是在这个函数中运行的唯一代码
我认为除非您设置侦听器，否则您会遇到跨浏览器问题......这是正确且公认的方法。不过这就是意见......