새로 추가 된 테이블 열에서 이벤트 리스너가 작동하지 않습니다.

Question

로드되는 기본 HTML 테이블이 있습니다. 구조는 CSV 파일의 내용에 따라 다르며 업로드 된 내용도 다릅니다. 테이블 열은 드래그 가능해야합니다 (Dragtable이라는 플러그인을 사용합니다). 그런 다음 행과 열을 추가하는 메서드가 있습니다. 열 추가 방법은 다음과 같습니다

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*"; 
} 
} 

문제는 내가 새 열을 추가 할 때, 나는 더 이상 다른 장소에 배치하기 위해 해당 열을 끌 수 있다는 것입니다. 또한 사용자가 th 요소를 클릭 할 때 열을 삭제할 수 있도록 테이블 제목에 대한 onclick 핸들러가 있습니다. 새로 추가 된 열에서는이 작업이 수행되지 않습니다. 기본적으로 모든 이벤트 리스너는 새 열에 추가되지 않습니다.

테이블과 페이지를 숨기고 표시하려고했습니다. 작동하지 않습니다. 테이블을 새로 고칠 수있는 방법이 필요하다고 생각하지만 작동하는 것을 찾을 수 없습니다. 이 같은

뭔가 :

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

이 작업을 수행 할 수있는 방법이 있나요? 또는 열을 추가하는 방식에 문제가있어 이벤트 리스너가 연결되지 않은 이유가 될 수 있습니다.

EDIT

삭제 열에 방법은 아래와 같다 : (적절한 이벤트와 위임을 편집) 이 삭제 열에 방법에 대한 문제를 해결. 난 그냥 내 테이블에 드래그 클래스를 추가, 여전히 끌어 종류의 새 열 Dragtable의 열 정렬에 관한

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

하지만 드릴 수 없습니다. 이벤트 수신기가 어떻게 보이는지 잘 모르겠습니다.

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

Answer 1

이벤트 위임을 사용해야합니다. 이벤트 객체의 속성 인 .target을 검사하여 이벤트가 표제를 타겟으로하는지 확인하고 적절한 조치를 취하는 테이블 자체에 이벤트 수신기를 추가해야합니다. j08691으로

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

_{지적하고있다, 당신은 태그 수도 jQuery를 : 이벤트 위임 방식에서 제외}

, 당신이 만들 수있는 또 다른 쉽게 수정하면 새 행을 추가 할 때 단순히 핸들러를 연결하는 것입니다 실수로 jQuery 코드를 추가하지 않고 있습니다.