JQuery добавление обработчиков событий в eval'ed элементы

Question

У меня есть таблица, сгенерированная динамически с помощью JQuery, с использованием

this.html("<table><tr><td><div>Click Me</div></td></tr></table>");

внутри таблицы, у меня есть несколько делений (в моем примере для простоты показан только один), к которому я хочу добавить обработчик события клика.Я хотел бы поддерживать чистоту HTML-кода и использовать как можно больше возможностей JQuery, но, поскольку я делаю что-то типа 'eval', я не могу понять, как это сделать.

Я знаю, что могу использовать $("div[some attribute selector]").on("click", {}, clickHandler);, но разве это хорошая идея в моем случае?

Answer 1

Вам нужны делегированные события. Для этого просто используйте метод jQuerys on(), например:

$(document.body).on('click', 'div', function( event ) {
    // do something
});

Ссылка: .delegate () , .on ()

Что это? Почти все события делают то, что мы называем «пузырем». Это означает, что если вы щелкнете по вложенному элементу, ваш браузер увидит, есть ли какой-либо обработчик события click, связанный с этим узлом. Если это так, он выполняет их, а затем родительский элемент этого элемента также спрашивается, есть ли какой-либо обработчик события click. Это продолжается до тех пор, пока какой-либо обработчик prevents не получит событие от дальнейшего всплытия или пока мы не достигнем document.documentElement (html).

Итак, вы должны изменить вышеуказанный document.body на ближайший узел относительно ваших динамически добавленных элементов.

Answer 2

Для этого можно использовать live или делегат