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 тегу - для фото это номер фото , для дока - имя дока , для чата - имя пользователя

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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