環路元素

Question

我需要的onClick事件添加到循環元素的onClick：

<div id="try"><div/> 
<div id="boxes"><div/> 

<script> 

var x=1; 
var boxes=[]; 
while(x<=7){ 
boxes[x++]=['<div class="colorbox">whatever now, because it will be colored boxes</div>'];} 
document.getElementById("boxes").innerHTML=boxes; 

var i = document.getElementsByClassName('colorbox'); 
document.write(i); 
i.onclick = function(){doit(1, 2);} 

function doit(a, b){ 
    document.getElementById("try").innerHTML=a + b;} 
<script> 

我不知道爲什麼onclick事件並沒有在這個例子中工作。控制檯不會給出任何錯誤。什麼可能是錯的？ 'document.write（i）'表明，這個var不是空的，也不是未定義的。這只是html對象。

Answer 1

document.getElementsByClassName()使用多個「元素」，因而返回的集合。如果只有一個匹配類選擇器的元素，它將返回一個具有一個元素的集合。

因此，您需要將您的處理程序附加元素本身，而不是整個數組。正如您所標記你的問題jQuery，我建議使用jQuery（這將處理程序附加到每個元素的數組）：

var x=1; 
var boxes=[]; 
while(x <= 7) { 
    boxes[x++] = ['<div class="colorbox">whatever now, because it will be colored boxes</div>']; 
} 

document.getElementById("boxes").innerHTML = boxes; 

var i = document.getElementsByClassName('colorbox'); 

document.write(i); 

$(i).on('click', function() { 
    doit(1, 2); 
}); 

function doit (a, b) { 
    document.getElementById("try").innerHTML = a + b; 
} 

Answer 2

它的工作原理，當我用$('.colorbox')代替$(i)，刪除所有與零件i變量和更改.on事件.click事件：

var x=1; 
var boxes=[]; 
while(x<=7){ 
boxes[x++]=['<div class="colorbox">whatever now, because it`ll be colored boxes</div>'];} 
document.getElementById("boxes").innerHTML=boxes; 

$('.colorbox').click(function() { 
    doit(1, 2); 
}); 

function doit(a, b){ 
    document.getElementById("try").innerHTML=a + b;}