jQuery不觸發動態創建的表

Question

我目前正在開發ASP.Net應用程序，並且正在動態構建HTML表。

除標題行外，每個表行都應具有重新排序的能力。 總的來說，這是可行的，但是我編寫的委托事件並不總是會觸發，因此用戶可以單擊一段時間才能發生任何事情。

請查看我的代碼，並讓我知道我在哪里出錯了，因為這需要在每個瀏覽器上都能夠一致地工作。

$('td').on('click', "a.up, a.down, a.top, a.bottom", function () {    

console.log("up or down arrow clicked");    

var row = $(this).parents("tr:first");    
var thisTable = row.closest("table");    
if ($(this).is(".up")) {    
    if (row[0].rowIndex > 1) {    
        row.insertBefore(row.prev());    
    }    
} else if ($(this).is(".down")) {    
    row.insertAfter(row.next());    
} else if ($(this).is(".top")) {    
    row.insertBefore($("table tr:first"));    
    row.insertAfter(row.next());    
} else {    
    row.insertAfter($("table tr:last"));    
}    

});  

任何幫助都將不勝感激。

Answer 1

代替：

$('td').on('click', "a.up, a.down, a.top, a.bottom", function () {    

嘗試

$(document).on('click', "a.up, a.down, a.top, a.bottom", function () {

Answer 2

2件事：

1. 將$('td').on('click',更改$('table').on('click',

2. 代替is('.top') ，您應該檢查hasClass('.top')

下面是更新的代碼：

$('table').on('click', "a.up, a.down, a.top, a.bottom", function() {

  console.log("up or down arrow clicked");

  var row = $(this).parents("tr:first");
  var thisTable = row.closest("table");
  if ($(this).hasClass(".up")) {
    if (row[0].rowIndex > 1) {
      row.insertBefore(row.prev());
    }
  } else if ($(this).hasClass(".down")) {
    row.insertAfter(row.next());
  } else if ($(this).hasClass(".top")) {
    row.insertBefore($("table tr:first"));
    row.insertAfter(row.next());
  } else {
    row.insertAfter($("table tr:last"));
  }

});

Answer 3

更改代碼：

$('td').on('click', "a.up, a.down, a.top, a.bottom", function () { ....

至 ：

$(document).on('click', "a.up, a.down, a.top, a.bottom", function () { ...