在另一个中附加一个 div 并在其上单击事件

Question

我有一个 parent div

<div id='thumb'>

然后我有一个 Javascript，它是运行一个 for..loop 并根据数字在其中附加 child divs。所以假设我想要 3 个新的 divs，我的循环是一个接一个地附加给它们一个 class 名称。

最后我有：

<div id='thumb'>
    <div class='newTumb1'></div>    /*this div was created in loop 1*/
    <div class='newTumb2'></div>    /*this div was created in loop 2*/
    <div class='newTumb3'></div>    /*this div was created in loop 3*/
</div>

我的脚本是这样的：

for (i=1;i<Num;i++){
    var iDiv = document.createElement('div');
    iDiv.id = 'newTumb';
    iDiv.title=count;
    var classN="newTumb"+count;
    iDiv.className = classN;
    iDiv.style.margin= '5px';
    document.getElementById('thumb').appendChild(iDiv);
}

问题是我希望能够单击任何这些新的 divs (newTumbx) 并发生事件。为了我的生活..做不到!!!

我知道我需要使用某种 .on(click,...) jquery 事件，尽管我已经尝试了很多建议，但我的代码就是没有这样做。我在控制台中没有收到任何错误，但似乎从未分配过点击事件。

由于我是这一切的新手，如果有人能帮助我并告诉我我需要在哪里放置 .on(click..) 事件以及如何制作语法，我将不胜感激

感谢您的回复以及您的帮助和时间。

Answer 1

你想要：

for (i=1;i<Num;i++){
    var iDiv = document.createElement('div');
    iDiv.setAttribute('onlick', 'yourFunction()')
    iDiv.id = 'newTumb';
    iDiv.title=count;
    var classN="newTumb"+count;
    iDiv.className = classN;
    iDiv.style.margin= '5px';
    document.getElementById('thumb').appendChild(iDiv);
}

Answer 2

尝试：

function callback(e){
    // e is a mouse event 
    alert('Hello from: ' + e.srcElement.id);
}
for (var i=1; i < Num; i++){
    var count = i;
    var iDiv = document.createElement('div');
    iDiv.id = 'newTumb' + count;
    iDiv.title=count;
    var classN="newTumb";
    iDiv.className = classN;
    iDiv.style.margin= '5px';

    iDiv.addEventListener('click', callback);

    document.getElementById('thumb').appendChild(iDiv);
}

有关鼠标事件的更多信息，请查看： https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

编辑：上面的代码有一些错误，但总体思路仍然成立。

我用解决方案做了一个 fiddle，它添加了点击事件。这现在有效。希望对您有所帮助。

http://jsfiddle.net/hjamal/pmn1mws5/

在另一个中附加一个 div 并在其上单击事件

append a div inside another and have click event on it

append

dynamic

click