javascript - 将事件处理程序分配给 for 循环中的每个按钮

Question

我试图为通过 for 循环生成的每个按钮分配一个 onclick 属性，但没有成功。该循环生成一个填充有搜索结果的表，并且该按钮必须将一个值传递给 JPlayer。以下代码使用按钮 + i plain 的类不起作用，尽管我不确定为什么。删除 i 变量显然只会将事件处理程序分配给数组中的最后一个元素，确实如此。我在这里浏览了一些类似的问题，因为我认为这是 JS 循环的常见陷阱，但我无法让任何答案适用于这种情况。

function displayResults(searchData){

    var numResults = searchData.results.length;

    $("#searchResults").html("");

    var table = document.createElement("table");
    table.setAttribute("class", "table");


    for(var i = 0;i < numResults; i++) {
        var resultTr = document.createElement("tr");
        var results = searchData.results[i];

        var resultArtist = document.createElement("td");
        resultArtist.appendChild(document.createTextNode(results.artist));
        var resultSong = document.createElement("td");
        resultSong.appendChild(document.createTextNode(results.songTitle));
        var resultAlbum = document.createElement("td");
        resultAlbum.appendChild(document.createTextNode(results.album));
        var resultDisk = document.createElement("button");      
        resultDisk.setAttribute("class", "playButton" +i);      

         $( ".playButton" +i).on( "click", { value: results.diskLocation }, function( event ) {

                player(event.data.value);
              });

        resultDisk.appendChild(document.createTextNode("play"));

        resultTr.appendChild(resultArtist);
        resultTr.appendChild(resultSong);
        resultTr.appendChild(resultAlbum);
        resultTr.appendChild(resultDisk);
        table.appendChild(resultTr);
        $("#searchResults").append(table);
    }
}

我尝试过使用this，但我似乎也无法使其工作。那么，如何正确地将事件处理程序分配给循环中动态生成的元素呢？

Answer 1

问题是您在将新按钮添加到 DOM 之前使用了 $( ".playButton"+i) 选择器，因此它找不到任何内容。将其更改为:

$(resultDisk).on("click", { value: results.disklocation }, function(event) {
    player(event.data.value);
});

此外，$("#earchResults").append(table) 应该位于 for 循环之外。在循环完全填充表格后，您只需追加表格一次。