Работа с событиями JavaScript (jQuery)

251
28 февраля 2017, 15:05

Доброго времени суток

Вот не как не могу сообразить как правильно организовать код, а именно для работы с событиями

Есть обычный блок

<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="">
Answer 1

Событие можно вешать на класс или произвольный селектор, например:

$('.contact-addr a').click(function(event) {
  ....
});

Для динамических элементов click() не работает, для них надо делать так:

$('.portfolio_filter').each(function(){
  var $this_filter = $(this);
  $this_filter.on('click', 'a', function(){
    ....
  });
});
Answer 2

Данный метод подходит для динамически появляющихся элементов с классом "mySelector"

$(document).on('click', '.mySelector', function(e) {
  // обработка события
})
Answer 3

класс ДинКонтент - все что подгружается на страницу, на любой тег ставите проперти какое то - фото , док , чат и дт и тп . так же добавляете id тегу - для фото это номер фото , для дока - имя дока , для чата - имя пользователя

получается нажали на класс ДивКонтент , определили проперти , по проперти определили тип контента и как вы его обрабатываете,
по аиди получили именно тот тег , на котором был клик

в результате имеете тип выбранного контента , по типу отправляете контент в функцию , работающую с данным видом контента, по аиди работаете именно с нужным вам элементом в указанной функции ...

READ ALSO
Слои, z-index, перекрытие слоев

Слои, z-index, перекрытие слоев

Выпадающее меню кнопки попадает по слой другого элемента, который находится нижеХотя у выпадающего меню явно указано абсолютное позиционирование...

249
Показ кнопки меню на small разрешении. Navbar bootsrap

Показ кнопки меню на small разрешении. Navbar bootsrap

Мне нужно активировать показ кнопки вызова мобильного меню на sm разрешении, можно ли так сделать избежав смены точек медиа запросовСпасибо

261
Нет скролла для промотки страницы при использовании echo()

Нет скролла для промотки страницы при использовании echo()

Свойство word-wrap: break-word повесьте на body

223
Как можно удалить bottom, top, left, right?

Как можно удалить bottom, top, left, right?

Мне нужно удалить значение bottom у элементов с position: absolute;Очень часто бывает что если на большом экране указан bottom, а на маленьком экране мне...

275