Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2020, 11:31
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 210

Установка наблюдателя MutationObserver
Здравствуйте!
Подскажите, пожалуйста,.. возникло несколько вопросов по ниже приведенному коду.
Нужно отследить появления элемента...
Вопрос:
Здесь указываем тот элемент, в котором ожидаем появления нужного нам элемента, или тот элемент, появления которого мы ожидаем?: document.querySelector('#some-id');

// выбираем нужный элемент для наблюдения
var target = document.querySelector('#some-id');

// если jQuery
var target = $('#some-id')[0];
 
// создаем новый экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// создаем конфигурации для наблюдателя
var config = { attributes: true, childList: true, characterData: true };
 
// запускаем механизм наблюдения
observer.observe(target,  config);
 
// позже, если надо, прекращаем наблюдение
observer.disconnect();
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2020, 11:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,250

Сообщение от DDim1000
Здесь указываем тот элемент, в котором ожидаем появления нужного нам элемента,
Сообщение от DDim1000
childList: true,
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2020, 12:10
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,386

Цитата:
target - A DOM Node (which may be an Element) within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched.
Т.е. target - это элемент, за которым Observer будет наблюдать.
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2020, 12:28
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 210

А mutations.forEach(function(mutation)({}) что делает? При каждом изменении DOM ищет тот элемент, за которым установлено наблюдение?
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2020, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,250

Сообщение от DDim1000
что делает?
Сообщение от DDim1000
attributes: true, childList: true, characterData: true
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2020, 23:28
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 210

Подскажите, пожалуйста, почему ошибка?: Uncaught NotFoundError: Failed to execute 'observe' on 'MutationObserver': The provided node was null
// выбираем элемент, который должен появится в DOM
               var target = document.querySelector("#message-list");

function track_send(){
              
	var observer = new MutationObserver(function(mutations) { 
		mutations.forEach(function(mutation) {
                                               alert("Сработало!");  
                                    
		});
	});

	var config = { attributes: true, childList: true, characterData: true };

	observer.observe(target, config);
           
}

 $("div[data-name='send']").click(function(){
        track_send();
       //.............
});

Последний раз редактировалось DDim1000, 26.09.2020 в 23:32.
Ответить с цитированием
  #7 (permalink)  
Старый 27.09.2020, 00:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,250

Сообщение от DDim1000
выбираем элемент, который должен появится в DOM
фантастика! как можно выбрать, то чего нет?
Ответить с цитированием
  #8 (permalink)  
Старый 27.09.2020, 12:33
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 210

Не понял. Тогда, нужно проверку что ли ставить? А иначе, как узнать то, что появился на страницы именно тот элемент, который нужен?
Как мне узнать, когда на странице появится $('div#some-id'); ???

Последний раз редактировалось DDim1000, 27.09.2020 в 12:37.
Ответить с цитированием
  #9 (permalink)  
Старый 27.09.2020, 14:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,386

DDim1000, установите слушателя на родительский элемент относительно вашего div#some-id и слушайте изменения детей.
Ответить с цитированием
  #10 (permalink)  
Старый 28.09.2020, 16:04
Профессор
Отправить личное сообщение для DDim1000 Посмотреть профиль Найти все сообщения от DDim1000
 
Регистрация: 20.10.2016
Сообщений: 210

Что-то у меня не получается.... Посмотрите, пожалуйста, код: https://jsfiddle.net/z9q3kn6w/1/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
MutationObserver и Single Page Application vgiv Firefox/Mozilla 0 11.12.2019 02:19
Калькулятор с вариантом значений. dzho Общие вопросы Javascript 45 06.08.2017 04:54
Установка дефолтных значений формы deonis Angular.js 4 03.08.2015 10:06
Правильное использование MutationObserver Magneto Общие вопросы Javascript 5 04.08.2012 20:51
Установка свойств на странице amperykl Элементы интерфейса 6 21.02.2011 23:08