事件侦听器不适用于新添加的表列

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代码。}