防止点击功能多次触发

Question

我想只做一个简单的点击功能，但是当我这样做时，它会触发数量在数组中的确切数量的次数。所以如果我点击按钮我显示3次失败，因为阵列中有3个项目（湖人，cavs，太阳）。我的问题是我如何防止它被解雇x次？

var TeamPlayers = [{ 
    team: 'Lakers', 
    Players: ['Russell', 'Clarkson', 'Ingram', 'Randle', 'Zubacs'] 
}, { 
    team: 'Cavs', 
    Players: ['Irving', 'Smith', 'LeBron', 'Love', 'Thompson'] 
}, { 
    team: 'Suns', 
    Players: ['Ulis', 'Booker', 'Warren', 'Chriss', 'Len'] 
}] 

for (var i = 0; i < TeamPlayers.length; i++) { 
    var TeamPlayersVar = TeamPlayers[i].team 
    // console.log('outside loop',TeamPlayers[i].team); 

    $('.leftPlayer').append('<button class="leftButtons">' + TeamPlayers[i].team + '</button>' + '<br>') 
    $(document).on('click', '.leftButtons', function(){ 
    console.log(this) 
    }); 
} 

Answer 1

我会建议使用一个id来做到这一点。这应该解决你的问题。因为点击与ID

for (var i = 0; i < TeamPlayers.length; i++) { 
    var TeamPlayersVar = TeamPlayers[i].team 
    // console.log('outside loop',TeamPlayers[i].team); 

    $('.leftPlayer').append('<button id="btn'+i+'" class="leftButtons">' + TeamPlayers[i].team + '</button>' + '<br>') 
    $("#btn"+i).click(function(){ 
    console.log(this) 
    }); 
} 

Answer 2

发生这种情况，因为你是分配上的点击监听器一类，并有与指定的类名3个元素，以使其工作只有一次登记，请使用ID或使用唯一的类名

Answer 3

你只需把你的点击处理程序代码外循环即

var TeamPlayers = [{ 
    team: 'Lakers', 
    Players: ['Russell', 'Clarkson', 'Ingram', 'Randle', 'Zubacs'] 
}, { 
    team: 'Cavs', 
    Players: ['Irving', 'Smith', 'LeBron', 'Love', 'Thompson'] 
}, { 
    team: 'Suns', 
    Players: ['Ulis', 'Booker', 'Warren', 'Chriss', 'Len'] 
}] 

for (var i = 0; i < TeamPlayers.length; i++) { 
    var TeamPlayersVar = TeamPlayers[i].team 
    // console.log('outside loop',TeamPlayers[i].team); 

    $('.leftPlayer').append('<button class="leftButtons">' + TeamPlayers[i].team + '</button>' + '<br>') 
}//for() 


$(document).on('click', '.leftButtons', function(){ 
    console.log(this) 
});