Событие, не инициированное динамически добавленными строками таблицы

Question

У меня есть пример here со столом, где динамически добавляются строки. Каждая строка должна инициировать событие:

$("#tblTest > tbody > tr").on("click", function(e){  
    alert();   
    }); 

Этот код не работает для динамически добавленных строк. В чем проблема?

Answer 1

Это добавляет щелчок к тр о создании. Вам нужно вместо этого атаковать клик на тём, а затем фильтровать до tr.

$("#tblTest > tbody").on("click", "tr", function(e){  
    alert();   
    }); 

Answer 2

Попробуйте, как это ..

$(function() { 
    $(document).on("click", "#tblTest > tbody > tr", function(e) { 
    alert(); 
    }); 
}); 

Answer 3

Вы должны изменить свой код, чтобы использовать тело для случая .По:

$("body").on("click", "#tblTest > tbody > tr", function(e){  
    alert();   
    }); 

Answer 4

Для динамически добавляемых элементов необходимо использовать event delegation:

$(document).on("click", "#tblTest > tbody > tr", function(e){  
    alert('test');   
    }); 

Изменено Codepen.

Answer 5

Когда вы динамически добавляете строку, вы должны привязать новый прослушиватель onClick к добавленному элементу. Ваш код только добавляет слушателя к элементам, уже находящимся на странице; а не вновь созданные элементы. Что-то, как это будет работать нормально:

var AddRow = function(){ 
    // add element 
    $("#tblTest > tbody").append("<tr><td>Test name</td><td>Last anme</td></tr>"); 
    // add listener to new element 
    $("#tblTest > tbody > tr:last-of-type").on("click", function(e){  
      alert();   
    }); 
} 

: последний из-типа псевдо-селектор является ключом, чтобы избежать связывания нескольких слушателей к клеткам.

Answer 6

Вы можете использовать делегирование событий.

$(document).off('click.namespace').on('click.namespace', '#tblTest > tbody > tr', function (e) { 
alert();   
    }); 

Он будет перепроверять события. Так что динамически добавленные строки также связывают события.