Доброго времени суток
Вот не как не могу сообразить как правильно организовать код, а именно для работы с событиями
Есть обычный блок
<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="">
Событие можно вешать на класс или произвольный селектор, например:
$('.contact-addr a').click(function(event) {
....
});
Для динамических элементов click() не работает, для них надо делать так:
$('.portfolio_filter').each(function(){
var $this_filter = $(this);
$this_filter.on('click', 'a', function(){
....
});
});
Данный метод подходит для динамически появляющихся элементов с классом "mySelector"
$(document).on('click', '.mySelector', function(e) {
// обработка события
})
класс ДинКонтент - все что подгружается на страницу, на любой тег ставите проперти какое то - фото , док , чат и дт и тп . так же добавляете id тегу - для фото это номер фото , для дока - имя дока , для чата - имя пользователя
получается нажали на класс ДивКонтент , определили проперти , по проперти определили тип контента и как вы его обрабатываете,
по аиди получили именно тот тег , на котором был клик
в результате имеете тип выбранного контента , по типу отправляете контент в функцию , работающую с данным видом контента, по аиди работаете именно с нужным вам элементом в указанной функции ...
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Выпадающее меню кнопки попадает по слой другого элемента, который находится нижеХотя у выпадающего меню явно указано абсолютное позиционирование...
Мне нужно активировать показ кнопки вызова мобильного меню на sm разрешении, можно ли так сделать избежав смены точек медиа запросовСпасибо
Свойство word-wrap: break-word повесьте на body
Мне нужно удалить значение bottom у элементов с position: absolute;Очень часто бывает что если на большом экране указан bottom, а на маленьком экране мне...