jQuery - функция щелчка не срабатывает при загрузке содержимого из getjson

Question

Хорошо, я получаю данные обратно из API с помощью запроса getJSON. Затем я перебираю результаты и заполняю таблицу данными. Один из «td» я добавляю класс под названием «команда», а затем имеет функцию щелчка, которая должна просто переключать цвет фона при нажатии этого td. Он работает, когда я настраиваю скрипку и жестко кодирует td с данными. Но когда он загружается в таблицу, функция щелчка не срабатывает.

Я установил fiddle, который показывает, что основные функции работают нормально, когда td жестко закодирован с некоторыми данными.

Мои JS для getJSON выглядит следующим образом:

$.getJSON("helpers.php", { 
}) 
.done(function(rows) { 
    $.each(rows, function() { 
     var row = $('<tr>'); 
     var teamname = $('<td>').addClass("team").html(this.team); 
     var points = $('<td>').html(this.points); 
     row.append(teamname, points); 
     $('#table-fixtures').append(row); 
    }); 
}); 

и затем JS для функции мыши:

$('td.team').click(function() {  
    $(this).toggleClass('on'); 
}); 

и CSS, как и в скрипкой:

.table-fixtures td.team.on { 
    background-color: LightGreen; 
} 

Итак, я не могу понять, почему он работает, когда он жестко закодирован, но не загружен динамически. Я знаю, что класс работает так, как когда я добавляю еще один класс в качестве теста, он реализует CSS для этого класса, поэтому его функционирование не срабатывает, но ничего не происходит в консоли JS. Любая помощь оценивается.

Answer 1

Попробуйте использовать event delegation в этом контексте,

$(document).on('click','td.team',function() {  
    $(this).toggleClass('on'); 
}); 

Пожалуйста, прочитайте here, чтобы узнать больше о делегировании событий.