Таблица Javascript - установка onclick на лету

Question

У меня есть таблица в моем HTML под названием id = 'myTable'. Я затем заполнение строк на лету в JavaScript (потому что он будет постоянно меняться в течение использования программы.)

В другом месте в коде есть функция:

function OnClickRowMyTable(row){ 
    alert("You clicked row " + row.toString()); 
} 

Тогда Я строю таблицу:

table = document.getElementById("myTable"); 
for (i = 0; i < 10; i++) { 
    newRow = document.createElement('tr'); 
    newRow.setAttribute('style', "background-color: #FFFFBB"); 
    newRow.title = ""; 
    newRow.onclick = (function() { var iUse = i; return OnClickRowMyTable(iUse); })(); 
    table.appendChild(newRow); 

    for (j = 0; j < 5; j++) { 
     newCol = document.createElement('td'); 
     newCol.innerHTML = "-"; 
     newRow.appendChild(newCol); 
    } 
} 

Если я оставлю(); в конце строки onclick он фактически вызывает функцию OnClickRowMyTable несколько раз по мере построения таблицы.

Если я заканчиваю эту строку без функции(), то функция не вызывается во время построения, но когда я нажимаю на строку, она всегда говорит, что я нажал строку 10, независимо от строки, которую я нажал.

Как остановить функцию, вызываемую во время построения, а затем сказать, что я нажал правильную строку, когда я нажму на нее, вместо того, чтобы сказать, что я все время нажал строку 10?

Answer 1

Вы должны обернуть содержимое цикла в Сразу запущенной функции Expression (IIFE) и передать i к нему. Это будет поддерживать значение i, в то время как строки таблицы строятся.

\t var table = document.getElementById("myTable"); 
 
\t for (var i = 1; i <= 10; i++) { 
 
\t (function(i) { 
 
\t  var newRow = document.createElement('tr'); 
 
\t  newRow.setAttribute('style', "background-color: #FFFFBB"); 
 
\t  newRow.title = ""; 
 
\t  newRow.onclick = function() { 
 
\t  return OnClickRowMyTable(i); 
 
\t  }; 
 
\t  table.appendChild(newRow); 
 

 
\t  for (var j = 0; j < 5; j++) { 
 
\t  var newCol = document.createElement('td'); 
 
\t  newCol.innerHTML = "-"; 
 
\t  newRow.appendChild(newCol); 
 
\t  } 
 
\t })(i); 
 
\t } 
 

 
\t function OnClickRowMyTable(row) { 
 
\t alert("You clicked row " + row.toString()); 
 
\t }

<table id="myTable"></table>

Answer 2

Вы должны использовать делегирование, если хотите добавить элементы «на лету».

---

Проверьте это: http://api.jquery.com/on/

JQuery JS РЕШЕНИЕ:

$("#myTable").on("click", "tr", function() { 
    var row = $(this); 
    alert("You clicked row " + row.toString()); 
}); 

---

ВАНИЛЬНОЕ JS РЕШЕНИЕ:

document.addEventListener('click', function(event) { 
    if (event.target.id == 'my-id') { 
     // put your code here 
    } 
}); 

не версия ID:

document.addEventListener('click', function(event) { 
    var t = event.target; 
    while (t && t !== this) { 
     if (t.matches('tr')) { 
      // your code goes here 
     } 
     t = t.parentNode; 
    } 
});