我正在尝试使用 javascript 设置 onclick 事件。以下代码有效:
var link = document.createElement('a');
link.setAttribute('href', "#");
link.setAttribute('onclick', "alert('click')");
然后我使用 appendChild 添加指向文档其余部分的链接。
但我显然想要一个比 alert 更复杂的回调,所以我尝试了这个:
link.onclick = function() {alert('clicked');};
还有这个:
link.onclick = (function() {alert('clicked');});
但是那没有任何作用。当我点击链接时,没有任何反应。我使用 chrome 进行了测试,浏览 DOM 对象显示该元素的 onclick 属性为 NULL。
为什么我无法将函数传递给 onclick?
编辑:
我尝试按照下面的建议使用 addEventListener,结果相同。链接的 DOM 将 onclick 显示为 null。
我的问题可能是该元素的 DOM 可能尚未完全构建。此时页面已经加载,用户单击了一个按钮。该按钮执行 javascript,构建一个新的 div,它通过调用 document.body.appendChild 附加到页面。此链接是新 div 的成员。如果这是我的问题,我该如何解决?
最佳答案
我一直无法重现这个问题。与 OP 的发现相反,下面的行在最新版本的 IE、FF、Opera、Chrome 和 Safari 上运行良好。
link.onclick = function() {alert('clicked');};
你可以访问这个jsFiddle在你自己的浏览器上测试:
假设我们在 html 页面中有这个:
<div id="x"></div>
下面的代码在我试过的浏览器上运行良好:
var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}
document.getElementById("x").appendChild(link);
如果存在浏览器兼容性问题,使用 jQuery 应该可以解决并使代码更加简洁:
var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})
$("#x").html($link)
如果简洁性不足以作为使用 jQuery 的理由,那么浏览器兼容性应该是......反之亦然:-)
注意:我没有在代码中使用 alert() 因为 jsFiddle 似乎不喜欢它:-(
关于javascript - 如何用JavaScript设置onClick?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13637133/