0

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

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

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

<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="">
1
  • присылайте скрипт с событиями (делегирование продолжайте использовать) как часть динамического контента. В скриптах, добавляющих обработчики событий, проверяйте были ли они уже добавлены.
    – user176262
    26 фев 2017 в 17:07

3 ответа 3

0

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

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

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

$('.portfolio_filter').each(function(){
  var $this_filter = $(this);
  $this_filter.on('click', 'a', function(){
    ....
  });
});
13
  • Динамический контент, jquery о новом html не будет попросту знать, html который подгружен скажем через ajax
    – Vizivizler
    26 фев 2017 в 16:58
  • Ерунда полная. Как раз будет. Как раз так и делал через .on() для контента (галереи), подгружаемой через ajax. 26 фев 2017 в 17:00
  • вот этот кусок с portfolio-filter я выдернул со своего сайта, где ajax 26 фев 2017 в 17:02
  • Я так и написал var content = $("#content"); content.on("click", "#wrapChat .remove", function (e) { // тут чо-то важное }); Но таких обработчиков нужно сразу тогда кучу писать так как js у меня загружается только один раз при первом заходе на сайт, получается когда событие будет "всплывать" оно будет сверятся с этой кучей обработчиков
    – Vizivizler
    26 фев 2017 в 17:05
  • а первое предложение прочитать? ))) Вешать можно на КЛАСС. Один обработчик на 100500 элементов сразу. 26 фев 2017 в 17:06
0

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

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

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.