Слушайте изменения в DIV и действуйте соответственно

У меня есть функция, которая захватывает XML-документ и преобразует его в соответствии с XSL-документом. Затем он помещает результат в div с идентификатором laneconfigdisplay . Я хочу сделать это, отдельно от логики преобразования, настроить событие изменения jQuery для этого div, чтобы я мог сказать, когда он изменился, и запустить некоторый код jQuery.

Я пробовал следующее, но это не сработает!

 $(document).ready(function() { $('#laneconfigdisplay').change(function() { alert('woo'); }); //Do XML / XSL transformation here });  

Что я делаю не так?

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

Привязка к пользовательскому событию:

 $('#laneconfigdisplay').bind('contentchanged', function() { // do something after the div content has changed alert('woo'); }); 

В вашей функции, которая обновляет div:

 // all logic for grabbing xml and updating the div here .. // and then send a message/event that we have updated the div $('#laneconfigdisplay').trigger('contentchanged'); // this will call the function above 

Событие change ограничено input , textarea & и select .

См. http://api.jquery.com/change/ для получения дополнительной информации.

http://api.jquery.com/change/

изменение действует только на элементы формы ввода.

вы можете просто вызвать функцию после преобразования XML / XSL или сделать прослушиватель:

 var html = $('#laneconfigdisplay').html() setInterval(function(){ if($('#laneconfigdisplay').html() != html){ alert('woo'); html = $('#laneconfigdisplay').html() } }, 10000) //checks your content box all 10 seconds and triggers alert when content has changed... 

Если возможно, вы можете изменить div на текстовое поле и использовать .change ().

Другим решением может быть использование скрытого текстового поля и обновление текстового поля одновременно с обновлением div. Затем используйте .change () в скрытой текстовой области.

Вы также можете использовать http://www.jacklmoore.com/autosize/, чтобы сделать текстовую область более похожей на div.

   $("#hiddentextarea").change(function() { alert('Textarea changed'); }) 

Обновление: Кажется, что textarea нужно расфокусировать после обновления, для получения дополнительной информации: Как настроить слушателя в jQuery / javascript для контроля за тем, изменилось ли значение в текстовом поле?

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

 $("body").on('DOMSubtreeModified', "#mydiv", function() { alert('changed'); }); 

Однако в долгосрочной перспективе вам придется использовать API MutationObserver .

Существует отличный плагин jquery, LiveQuery , который делает именно это .

Live Query использует возможности селекторов jQuery, связывая события или автоматически активируя обратные вызовы для согласованных элементов, даже после загрузки страницы и обновления DOM.

Например, вы можете использовать следующий код для привязки события click ко всем тегам A, даже к любым тегам A, которые вы можете добавить через AJAX.

 $('a').livequery('click', function(event) { alert('clicked'); return false; }); 

Когда вы добавите новые tags A в документ, Live Query свяжет событие click, и нет ничего, что нужно было бы назвать или сделать.

Вот рабочий пример его волшебства …

введите описание изображения здесь

Попробуй это

 $('#D25,#E37,#E31,#F37,#E16,#E40,#F16,#F40,#E41,#F41').bind('DOMNodeInserted DOMNodeRemoved',function(){ // your code; }); 

Не используйте это. Это может привести к сбою страницы.

 $('mydiv').bind("DOMSubtreeModified",function(){ alert('changed'); }); 
  • Какую версию jQuery следует упомянуть в коде
  • Что означает объект ? (JavaScript)
  • Draggable возвращается, если вне этого div и внутри других draggables (используя как недопустимые, так и действительные варианты возврата)
  • JQuery UI tooltip не поддерживает html-контент
  • SCRIPT7002: XMLHttpRequest: ошибка сети 0x2ef3, не удалось завершить операцию из-за ошибки 00002ef3
  • jQuery UI: Как изменить цвет ProgressBar?
  • Подстановочные знаки в селекторах jQuery
  • jquery Установка позиции курсора в контентном значении div
  • Конфликт jQuery и MooTools
  • Показать / скрыть несколько разделов с помощью JQuery
  • jquery ui datepicker и mvc просмотреть тип модели datetime
  • Interesting Posts

    Будет ли более высокая температура повреждать компьютер с течением времени, даже если он не достигнет максимума?

    Возможно ли base64-кодировать файл в кусках?

    Ноутбук игнорирует настройки мощности, закрывая крышку всегда спит / спящий режим, почему?

    Язык распознавания речи Windows 8

    Создайте перечисление со строковыми значениями в TypeScript

    Могу ли я заставить JAXB не преобразовывать «в», например, при сортировке XML?

    Автоматически добавлять комментарии к файлам PDF с регулярными выражениями

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

    Загрузка Jquery с тегами скриптов

    Какова цель настройки «Предпочитаю 32-бит» в Visual Studio 2012 и как она работает?

    Получить реальный путь от URI, Android KitKat новая система хранения данных

    Что такое sharedUserId в Android и как оно используется?

    Почему попытка {…} наконец {…} хорошая; try {…} catch {} bad?

    Как включить фронтальную вспышку программно в Android?

    Сгенерировать все уникальные подстроки для заданной строки

    Давайте будем гением компьютера.