Доброго времени суток
Вот не как не могу сообразить как правильно организовать код, а именно для работы с событиями
Есть обычный блок
<div id="content">
тут разные теги
</div>
В этот блок периодически добавляется/заменяется html код
Грубо говоря, это можно сказать что-то типа сайта который работает без обновления страницы, соответственно js код загружается только один раз при первом заходе на сайт
Вообщем суть проблемы Допустим в этот блок id="content" добавились сообщения "чат"
<div id="content">
<div id="wrapChat">
<div class="message">
<span class="remove">Удалить</span>
Тут сообщение
</div>
<div class="messgae">
<span class="remove">Удалить</span>
Тут сообщение
</div>
</div>
</div>
Либо там товары
<div id="content">
<div class="item">
Тут товар 1
</div>
<div class="item">
Тут товар 2
</div>
</div>
Вопрос как правильно вешать события на динамический контент?
Конечно же первое о чем подумал это "делегирование событий" но тут есть одно большое НО
В блок подгружается много разного контента, это получается на каждую кнопочку нужно вешать событие через id="content" типа:
$(document).ready(function () {
var content = $("#content");
content.on("click", "#wrapChat .remove", function (e) {
// тут чо-то важное
});
content.on("mouseenter", "#wrapChat .message", function (e) {
// тут чо-то важное
});
content.on("click", ".item", function (e) {
// тут чо-то важное
});
// ...
// ...
// ...
// ...
// ...
// ...
});
А что если форум подгружать там удаление сообщений, добавление, цитировать, ответить, вообщем разных кнопок много на которые нужно вещать события
Мне кажется это как-то не правильно, или мне это кажется? )
Буду благодарен за любую помощь )
Для меня это все в диковинку так как я больше по серверной части "гуляю"
P.S Из за своих "тараканов" я не могу повесить событие на прямую в html типа
<div class="item" onclick="">