事件偵聽器不適用於新添加的表列

Question

我有一個被加載的基本HTML表。 結構根據上傳的CSV文件的內容而有所不同。 表列必須是可拖動的（為此我使用了一個名為Dragtable的插件）。 然后，我有了添加行和列的方法。 add列方法如下所示：

function addCol(tblId) {
 var tblHeadObj = document.getElementById(tblId).tHead;
 for (var h=0; h < tblHeadObj.rows.length; h++) {
    var newTH = document.createElement('th');
    tblHeadObj.rows[h].appendChild(newTH);
    colCount = (tblHeadObj.rows[h].cells.length);
    newTH.innerHTML = 'Col ' + colCount;
 }

 var tblBodyObj = document.getElementById(tblId).tBodies[0];
 for (var i=0; i<tblBodyObj.rows.length; i++) {
    var newCell = tblBodyObj.rows[i].insertCell(-1);
    newCell.innerHTML = "*null*";
 }
}

問題在於，當我添加新列時，無法再拖動該列將其放置在其他位置。 我還有一個用於表標題的onclick處理程序，允許用戶單擊th元素時刪除列。 這也不適用於新添加的列。 基本上，所有事件偵聽器都不會添加到新列中。

我試圖隱藏並顯示表格和頁面，但是這不起作用。 我想我需要一種刷新表的方法，但是找不到有效的方法。

像這樣：

var table = document.getElementById("grid");
table.refresh ();

有沒有辦法做到這一點？ 還是我添加列的方式有問題，這可能是事件監聽器未附加的原因？

編輯

刪除列方法如下：（使用適當的事件委托進行編輯 ） 這解決了刪除列方法的問題。 我仍然無法拖動和排序新列

$("table").delegate("th:not(:first)", "click", function() {
   var index = this.cellIndex;
   $(this).closest('table').find('tr').each(function() {
     this.removeChild(this.cells[ index ]);
   });  
}

關於Dragtable列排序，我只是將可拖動類添加到表中。 我不確定事件監聽器的外觀：

<table id = "grid" class="draggable"></table>

Answer 1

您應該為此使用事件委托。 您應該做的是向表本身添加一個事件偵聽器，該偵聽器將檢查事件對象的.target屬性，以查看該事件是否針對標題並采取適當的操作。

除了事件委托方法之外，您可以做的另一種簡單解決方法是在添加新行時簡單地附加處理程序：

newTH.addEventListener("click", function(){
     //this should be your event listener
})

_{正如j08691所指出的那樣，您可能錯誤地標記了jQuery，所以我暫時不添加任何jQuery代碼。}