当我在事件期间向函数发送数据时，jquery 中的事件是否不起作用，那么我该如何解决这个问题?

Question

为什么在j-query中的事件上不起作用？它只工作一次。

我想在 j-query 工作中的事件上将数据移动到另一个块，所以我做了数组，当"点击"事件发生时，我将数据移动到另一个数组并执行名为"showList"的函数 但它只工作一次 我想知道为什么这个点击事件只工作一次

function(dataList){
var arrayNum=[];
var arrayNumDown =[];
//up
var length = Math.floor(Math.random()*5+1);
var list = "<div>";
for(var i=0; i<length; i++){
list+="<div class=number>";
list+="<span>5523-1134-112"+i+"</span>";
list+="<img class=imageA src=../image/x.png.png style=width:10px; height:10px;></div>";
arrayNum.push("5523-1134-112"+i);
}
list+="</div>";
$('#numbers').html(list);

//down
var Dlength = Math.floor(Math.random()*4+1);
var ul="<ul>";
for(var i=0; i<Dlength; i++){
ul+="<li><input type=checkbox name=listCheck class=checkArr> <span id=spa"+i+">"+"2311-223-111"+i+"</span></li>";
arrayNumDown.push("2311-223-111"+i);
}
ul+="</ul>";
document.querySelector("#contents").innerHTML = ul;

$('#numbers').on('click','.imageA',function(){
var val =$(this).prev().text();
for(var i=0; i<arrayNum.length; i++){
if(arrayNum[i]==val){
alert(i);
arrayNum.splice(i,1)
arrayNumDown.push(val);
console.log(arrayNumDown);
showList(arrayNum,arrayNumDown);
}
}
})
$('.checkArr').on('click',function(){
var val=$(this).next().text();
for(var i =0; i<arrayNumDown.length; i++){
if(arrayNumDown[i]==val){
arrayNumDown.splice(i,1);
arrayNum.push(val);
console.log(arrayNum);
showList(arrayNum,arrayNumDown);
}
}
})
}
}
function showList(arrayNum,arrayNumDown){
var list = "<div>";
for(var i=0; i<arrayNum.length; i++){
list+="<div class=number>";
list+=arrayNum[i];
list+="<img src=../image/x.png.png style=width:10px; height:10px; id=x"+i+"></div>";
}
list+="</div>";
$('#numbers').html(list);

var ul="<ul>";
for(var i=0; i<arrayNumDown.length; i++){
ul+="<li><input type=checkbox name=listCheck id=chk"+i+"> <span id=spa"+i+">"+arrayNumDown[i]+"</span></li>";
}
ul+="</ul>";
document.querySelector("#contents").innerHTML = ul;

}

Answer 1

当您使用.on("click")添加侦听器时，它只会将其添加到已经可用的元素中。动态添加新元素时，需要在此之后将侦听器添加到这些元素中。

另一种选择是将侦听器添加到父元素，并使用选择器变量将其限制为所需的元素。这样，它也可以处理动态创建的元素：

$('#contents').on('click','.checkArr',function(){