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循环之外。在循环完全填充之后，您只需要将表附加一次。

为for循环中的每个按钮分配事件处理程序

1 个答案: