Javascript jquery click函数中的行单击事件不仅适用于最后一行

我正在制作一个动态表，代码如下所示。我需要将用户带到其他页面的可单击行。它只能正常工作到最后一行，但只有一行。可单击行功能在最后一行中不存在

    $(window).load(function(){
       $.get("http://localhost:8080/MusicPlayer/GetSongList", function(data){
          console.log(data);
         var library = data;
         var table = $("#table");
         var row;
         library.songs.forEach(function(song){
             row = $("<tr></tr>");
                $("<td />").addClass("song-select").append($("<input />").attr({type:"checkbox",class:"checkbox",value:song.title})).appendTo(row);
                $("<td>"+song.title+"</td>").appendTo(row);
                $("<td>"+song.album.albumName+"</td>").appendTo(row);
                $("<td>"+song.artist+"</td>").appendTo(row);
                $("<td>"+song.rating+"</td>").appendTo(row);
                $("<td>"+song.composer+"</td>").appendTo(row);
                $("<td>"+song.genre.genreName+"</td>").appendTo(row);
                row.appendTo(table).click(viewFunction());
        });
    });

   }); 
   });

  function viewFunction(){
  $('#table tbody tr td:not(.song-select)').click(function () {
    var songTitle = $(this).parent().children('td:eq(1)').text();
    window.location.assign("http://localhost:8080/MusicPlayer/getSong?songTitle="+songTitle);
   });

  }

---

对动态元素使用事件委派。试试这个：

$('#table').on('click','tbody tr td:not(.song-select)'function () {


}

---

看看这个。您必须使用而不是VIEW函数

$(function(){
   $.get("http://localhost:8080/MusicPlayer/GetSongList", function(data){
      console.log(data);
     var library = data;
     var table = $("#table body");
     var row;
     library.songs.forEach(function(song){
         row = $("<tr></tr>").data('song-title', song.title);

            $("<td />").addClass("song-select").append($("<input />").attr({type:"checkbox",class:"checkbox",value:song.title})).appendTo(row);
            $("<td>"+song.title+"</td>").appendTo(row);
            $("<td>"+song.album.albumName+"</td>").appendTo(row);
            $("<td>"+song.artist+"</td>").appendTo(row);
            $("<td>"+song.rating+"</td>").appendTo(row);
            $("<td>"+song.composer+"</td>").appendTo(row);
            $("<td>"+song.genre.genreName+"</td>").appendTo(row);
            row.appendTo(table);
    });
});

}); 


$('#table tbody').on('click', 'td:not(.song-select)',function () {
var songTitle = $(this).parent().data('song-title');
location= "http://localhost:8080/MusicPlayer/getSong?songTitle="+songTitle;
});
});

必须使用.on绑定动态添加行的单击事件，如下所示-

$('#table tbody').on("click"," tr td:not(.song-select)",function () {

但在这里，您将歌曲选择类添加到最后一行td，如下所示

$.addClasssong选择

您的jquery选择器正在过滤所有具有song select类的td，请参见下文

$('#table tbody tr td:not(.song-select)').click(function () {

您需要跳过将类添加到最后一行或更改选择器

跳过添加类-

$("<td />").append($("<input />").attr({type:"checkbox",class:"checkbox",value:song.title})).appendTo(row);

$('#table tbody').on('click','tr td',function () {