Question

我试图将事件附加和onclick到我在Javascript中创建的img标记，但由于某种原因它不想附加。在我目前的代码中，我有：

var img = document.createElement('img');
img.src = pictures[picIndex][0];
img.alt = 'pic';
img.id = "picture_" + picIndex;
img.onclick = function() { alert('click') };
document.getElementById('container').appendChild(img);

但是当我加载我的网站时，除了onclick事件之外，我得到了所有内容，点击图片什么都不做：

<img src=".." alt="pic" id="picture_3">

为什么不追加？我也试过了

img.onclick = myFunction;

function myFunction() {
    alert('click');
}

同样的事情发生了。如果我手动编辑img标签以包含onclick函数，该函数执行得很好，但我不能在我的生活中找出为什么它在创建元素时不会附加。

Answer 1

如果你复制并粘贴你的代码，它看起来是一个错字

img.onlclick =

应该是

img.onclick =

这是一个演示小提琴：http://jsfiddle.net/mifi79/CE7PP/

您的问题可能在订购中 - 如果您的JS位于<div id="container"></div>之前的页面上（例如在<head>中），则document.getElementById将无法运行因为它尚不存在。

onclick事件不会在HTML中显示为内联，因为图像被实例化为Javascript对象，并且onclick处理程序作为图像对象上的属性存在。我创建了一个更新的小提琴（http://jsfiddle.net/mifi79/CE7PP/1/），它将图像对象onclick属性的值输出到控制台。

Answer 2

您的活动可能无法正常运行，因为您未对非IE浏览器使用addEventListener方法。也许试试这个。

img.addEventListener('click', function () { /* your function here */ }, false);

/* MS fallback */

(img.attachEvent) ? img.attachEvent('onclick', function () { /* func here */ }) : img.addEventListener('click', function () { /* func here */ }, false);

Javascript onclick事件没有附加

2 个答案: