Как сделать срабатывание нахождения элемента только один раз?

Question

[Anonymous]

Всем привет! Расскажу чуть подробнее. У меня есть такой код :

$('body').on('DOMNodeInserted', "div:contains('Cloud')", function () {
    alert();
});

И есть чат. Я пишу в него и пользователю прилетает сообщение с текстом Cloud. Логично, что потом происходит alert(). Но проблема в том, что так будет бесконечно, а мне нужно чтобы только один раз. То есть нашел <div> с текстом Cloud, сработал alert() и больше ничего не делал. А при заходе на страницу снова, где в истории есть тот же <div> с текстом Cloud, он не выполнял ничего, Но при появлении нового такого же <div> срабатывал.

Если не сложно, можете привести пример кода?

Comments

[Сергей Соколов]

jQuery.one() ?

$('body').one( ...

[Anonymous]

Сергей Соколов, а что делать чтобы при загрузке он не выполнял этот код? Но при новом таком же блоке сработал снова

[Сергей Сергей]

То есть, нужно реагировать на новые сообщения, а не на наличие полученных ранее таких сообщений?

[Anonymous]

Сергей Сергей, Да

[Сергей Соколов]

Sunlan4ch, как будем отличать div, по которому уже отработали, от свежего?

[Сергей Сергей]

Тогда вешать обработку вставки новых элементов после формирования списка сообщений.

[Anonymous]

Сергей Соколов, Возможно отличать по id? Например, у всех сообщений уникальный id, который все время увеличивается. Допустим сообщение "Привет" имеет id="msg_12", а сообщение "Cloud" уже id="msg_13" Единственное, в коде который я привел, проверяются все <div>. Если возможно, как это сделать? и как выбирать что новое, а что было?

[Сергей Соколов]

Sunlan4ch, чтобы пережило перезагрузку страницы, очевидно, придётся сохранять в куках или localStorage.
Показали алерт и тут же добавили id обработанного в LS.

[Сергей Соколов]

вообще, как-то надо пересмотреть всю задачу, шире.
Что происходит, что откуда приходит, и на что хочется показывать alert. Приходят же не div'ы, а сообщения прилетают, куда-то в socket, наверное. Движок чата наверняка умеет ставить сообщениям метки времени, или как-то помечать, где история, а где свежее прилетело.

[Anonymous]

Сергей Соколов, Да, время тоже определяет. Но по нему тогда как? Там формат не 18:10, а вообще полная дата с месяцем, годом и временем до секунд

Answer 1

[black1277]

Как вариант

$('body').on('DOMNodeInserted', "div:contains('Cloud')", function () {
    alert();
    $('body').off('DOMNodeInserted', "div:contains('Cloud')"); // после первого срабатывания - удаляем событие
});

Comments

[Anonymous]

а что делать чтобы при загрузке он не выполнял этот код? Но при новом таком же блоке сработал снова

[black1277]

Sunlan4ch, тогда вам нужно как-то регистрировать - было это событие уже или нет. И сохранять об этом информацию, например в localstorage. При заходе на страницу проверяете состояние, если не было - вешаете событие на элемент, если было - ничего не делаете.

[black1277]

Sunlan4ch, добавляйте каждому такому диву атрибут data-cloud и кладите в него текущую дату со временем Date.now() По этому атрибуту проверяйте в localstorage наличие.