Вы должны использовать делегирование события . Делегирование событий использует тот факт, что события " bubbles " через DOM , что означает, что многие элементы получают уведомление о событии одного из его дочерних элементов.
С jQuery это еще проще, поскольку оно сглаживает некоторые кросс-браузерные несоответствия обработки событий и всплывающих событий.
Теперь предположим, что вы хотите привязать обработчик событий к каждой строке таблицы. Прямой, но неэффективный способ справиться с этим - привязать обработчик событий к каждой строке. Это эффективно то, что вы делаете сейчас. Вместо этого представьте, что вы связываете один обработчик с таблицей и говорите: « Эй, вызывайте этот обработчик всякий раз, когда что-то случается с одной из моих строк ». Вот что такое делегирование событий. В jQuery 1.7 интерфейс для обработки событий был переработан и стал более согласованным. Вот пример того, как связать такой обработчик:
$('table.math').on(
/*
* This first argument is a map (object) of events and their corresponding
* event handlers, like so: {eventName: eventHandler ([e]) {})
*/
{
keyup: function doMath (e) {
// Your event handling code here.
// "this" refers to the input where the keyUp-event occured
}
},
/* This argument is a selector, and reads:
* 'For table with class "math", bind to the events listed above
* whenever a corresponding event occurs on an input with class
* "mathInput"
*/
'input.mathInput'
);
Дополнительным преимуществом делегирования события является то, что оно соответствует вашим критериям: * возникает проблема, когда я хочу .append новые элементы таблицы. Они не отвечают на keyup". При делегировании событий это автоматически работает для всех потомков, которые соответствуют селектору, независимо от того, присутствуют ли они, когда обработчик связан, или вставляются динамически позже.
Подводя итог, делегирование события:
- более эффективно . Вы связываете один обработчик вместо многих
- работает для динамически вставляемых элементов