Question

我需要将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 i也不是空的，也不是未定的。它只是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;}

onClick on循环元素

2 个答案: