防止點擊功能多次觸發

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) 
});