Question

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

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

  }

Answer 1

检查一下。你必须使用.on function而不是viewFunction。

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

Answer 2

您必须使用.on()来绑定动态添加行的点击事件，如下所示 -

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

但是，您要将song-select课程添加到最后一行td，如下所示

$("<td />").addClass("song-select").

并且您的jquery选择器正在过滤所有td类song-select的{{1}}，见下文

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

您需要跳过向最后一行添加课程或更改选择器。

跳过添加class -

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

OR

更改选择器（使用.on()绑定动态行的点击事件。）

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

Answer 3

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

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


}

jquery点击功能中的行点击事件不仅适用于最后一行

3 个答案: