每次更新动态创建的列表时都会触发onClick事件

Question

所以我动态地创建了这样的歌曲列表。

function createSongsList(number){
    clearDiv("songList");
    songListDiv = document.getElementById('songList')
    var active = ' active';
    var pause = ' pause';
    for (var i = 0; i <tracksList.length ; i++) {
        var text ="";

        if(i==number){
            $(songListDiv).append('<a href="#" class="list-group-item '+active+'" id="'+i+'"><h4 class="list-group-item-heading"><span class="glyphicon glyphicon-pause"></span>'+'   '+tracksList[i].title+'  '+'</h4><p class="list-group-item-text">'+text+'</p></a>');
        }
        else{
            $(songListDiv).append('<a href="#" class="list-group-item" id="'+i+'"><h4 class="list-group-item-heading"><span class="glyphicon glyphicon-play"></span>'+'   '+tracksList[i].title+'  '+'</h4><p class="list-group-item-text">'+text+'</p></a>');
        }

    };
    $(songListDiv).on("click", 'a', function (e) {
        console.log("ID of selected song: "+$(this).attr('id'));
    });
}

function clearDiv(divId){
    document.getElementById(divId).innerHTML="";
}

当我想根据当前正在播放的歌曲更改列表时，我只需再次调用该方法，然后清除创建动态列表的div并再次创建列表。

问题在于onclick事件如何触发与创建列表相同的次数。因此，当第一次创建列表时，onclick会触发一次。下次我调用该方法时，onclick会触发两次，等等。为什么会这样？

我是否应该创建一个新功能，我只更新列表中要更改的元素并使用onclick事件处理程序执行某些操作？我很难过......

Answer 1

每次点击都会绑定一个事件。虽然这是无效的，但我提出了两个选择：

第一个选项

从你的函数中获取绑定并将其写成：

$('#songList').on("click", 'a', function (e) {
    console.log("ID of selected song: "+$(this).attr('id'));
});

当#songList当前在DOM中时，应该放置此项。当DOM准备好或你自己附加它时，它可能就在那里。

第二个选项

在添加其他.on()：

之前关闭活动

$(songListDiv).off('click', 'a').on("click", 'a', function (e) {
    console.log("ID of selected song: "+$(this).attr('id'));
});