jquery點擊函數中的行單擊事件不適用於最後一行

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

使用動態元素的事件委託。試試這個：

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


} 

Answer 3

你必須使用.on()用於綁定點擊事件動態添加的行，像下面 -

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

但在這裏要添加song-select班最後一排td，如下圖所示

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

和你的jquery選擇器正在過濾所有它們是具有song-select類，見下文

$('#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()爲動態排結合的Click事件。）

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