Форум

DDim1000 · #1 (**permalink**) 13.09.2017, 11:49

Здравствуйте!
Подскажите пожалуйста, как узнать о том, что на страницы появился, например, div c определенным id?
Вот так не работает:

$( "$d" ).on({click: function() {
       alert('Я здесь))');
        }
        });

j0hnik · #2 (**permalink**) 13.09.2017, 11:53

У этого дива наверное есть событие, вот на него и надо обратить внимание.
Рони, недавно постил вот такой способ https://developer.mozilla.org/ru/doc...tationObserver

DDim1000 · #3 (**permalink**) 13.09.2017, 12:46

Этот код при любом изменении на страницы должен срабатывать, или нет?

var observer = new MutationObserver(function (mutations) {
	  alert('Я здесь))');
   });

Nexus · #4 (**permalink**) 13.09.2017, 13:35

Сообщение от DDim1000

Этот код при любом изменении на страницы должен срабатывать, или нет?

В описании конструктора все написано.

Сообщение от developer.mozilla.org

Параметры
callback
Вызывается при каждом изменении DOM-элемента. Observer вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов MutationRecord, Вторым аргументом является экземпляр MutationObserver.

Upd. Там даже пример использования есть. Если оставить ваш код как есть, то ни одного алерта вызвано не будет, так как ваш экземпляр не подписан ни на один DOM-элемент.

Dilettante_Pro · #5 (**permalink**) 13.09.2017, 14:01

DDim1000,
По идее, надо подписывать на body - тогда все изменения проявятся

j0hnik · #6 (**permalink**) 13.09.2017, 14:44

Сообщение от Dilettante_Pro

DDim1000,
По идее, надо подписывать на body - тогда все изменения проявятся

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
var observer = new MutationObserver(function(mutations) {
	if(document.querySelector("#id")){
    alert('Я здесь))');
    observer.disconnect();
  }
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<div id="id">Hello</div>'), 3000);
	</script>	
</body>
</html>

DDim1000 · #7 (**permalink**) 14.09.2017, 20:36

Спасибо!

DDim1000 · #8 (**permalink**) 15.09.2017, 14:19

Сообщение от j0hnik

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
var observer = new MutationObserver(function(mutations) {
	if(document.querySelector("#id")){
    alert('Я здесь))');
    observer.disconnect();
  }
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<div id="id">Hello</div>'), 3000);
	</script>	
</body>
</html>

Я не знаю в чем прикол, но, если label создаться с другим текстом, то код не срабатывает.
Вот смотрите, если jquery.validate создает вот такой код:

<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Укажите номер телефона!</label>

Или вот такой код:

<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Неверный формат номера телефона!</label>

То, все отлично работает!
Но, когда генерируется такой же код, только с другим текстом, ни какой реакции нет!

<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Пользователь с таким номером уже <br> зарегистрирован!</label>

j0hnik · #9 (**permalink**) 15.09.2017, 14:52

не нужно создавать два элемента с одинаковым ID отсюда проблемы.

observer.disconnect(); // снимает наблюдение если вам нужно наблюдать дальше, уберите эту строчку

Dilettante_Pro · #10 (**permalink**) 15.09.2017, 14:57

Так работает

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
var observer = new MutationObserver(function(mutations) {
	if(document.querySelector("#reg_phone-error")){
    alert('Я здесь))');
    observer.disconnect();
  }
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Неверный формат номера телефона!</label>'), 3000);
	</script>	
</body>
</html>

И так работает

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
var observer = new MutationObserver(function(mutations) {
	if(document.querySelector("#reg_phone-error")){
    alert('Я здесь))');
    observer.disconnect();
  }
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Пользователь с таким номером уже <br> зарегистрирован!</label>'), 3000);
	</script>	
</body>
</html>

Или вы создаете ЕЩЕ один лейбл?
Тогда j0hnik прав

Форум

Справочник

Discord чат

Курсы javascript