附加到img時未在JavaScript中觸發OnClick事件

Question

我是JavaScript的新手，所以這可能是基本的...

我正在嘗試動態創建圖像並將其添加為“ onclick”的事件監聽器。 我將此img添加到div 。

我這樣創建img：

function createNewSmiley()
{
    var newSmiley = document.createElement("img");
    newSmiley.src = "./smiley.jpg";
    newSmiley.alt = "Smiley Image";
    newSmiley.style.width = "64px";
    newSmiley.style.height = "64px";
    return newSmiley;
}

然后像這樣使用將其添加到div中：

function positionNewSmiley(parent, smiley, x, y)
{
    var newSmiley = createNewSmiley();
    newSmiley.style.top = y + "px";
    newSmiley.style.left = x + "px";
    parent.appendChild(newSmiley);
}

這是我的主要功能：

function main(smileyCount)
{
    var myDiv = document.getElementById("myDiv");
    for (var i = 0; i < smileyCount;i++)
    {
        var x = Math.floor((Math.random() * 500));
        var y = Math.floor((Math.random() * 500));
        var smiley = createNewSmiley();
        smiley.onclick = smileyClicked;
        positionNewSmiley(myDiv, smiley, x, y);
    }
}

function smileyClicked(ev) {
    alert("OK");
}

但是onclick事件不會觸發！

但是，如果我將事件偵聽器添加到div-它將。

我究竟做錯了什么？

Answer 1

如果您在create函數中添加on click，它將起作用

    function createNewSmiley()
{
    var newSmiley = document.createElement("img");
    newSmiley.src = "./smiley.jpg";
    newSmiley.alt = "Smiley Image";
    newSmiley.style.width = "64px";
    newSmiley.style.height = "64px";
    newSmiley.addEventListener("click", smileyClicked);
    return newSmiley;
}

Answer 2

如以上注釋中所述，當您要放置傳遞的smiley時，您將在positionNewSmiley創建新的smiley ：

var smiley = createNewSmiley();
smiley.onclick = smileyClicked;

positionNewSmiley(myDiv, smiley, x, y);
_________________________^^^^^^

只需在position函數中使用它：

function positionNewSmiley(parent, smiley, x, y)
{
    smiley.style.top = y + "px";
    smiley.style.left = x + "px";

    parent.appendChild(smiley);
}

希望這可以幫助。

 function createNewSmiley() { var newSmiley = document.createElement("img"); newSmiley.src = "http://cfile24.uf.tistory.com/image/163BB51F4BF9DF7431AB10"; newSmiley.alt = "Smiley Image"; newSmiley.style.width = "64px"; newSmiley.style.height = "64px"; return newSmiley; } function positionNewSmiley(parent, smiley, x, y) { smiley.style.top = y + "px"; smiley.style.left = x + "px"; parent.appendChild(smiley); } function main(smileyCount) { var myDiv = document.getElementById("myDiv"); for (var i = 0; i < smileyCount;i++) { var x = Math.floor((Math.random() * 500)); var y = Math.floor((Math.random() * 500)); var smiley = createNewSmiley(); smiley.onclick = smileyClicked; positionNewSmiley(myDiv, smiley, x, y); } } function smileyClicked(ev) { alert("OK"); } main(6); 

 <div id='myDiv'></div>