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

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

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

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

<!-- HTML code here -->
<div id="laneconfigdisplay"></div>

Что я делаю неправильно?

Ответы

Ответ 1

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

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

$('#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

Ответ 3

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...

Ответ 4

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

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

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

<style>
.hidden{
display:none
}
</style>

<textarea class="hidden" rows="4" cols="50">

</textarea>


$("#hiddentextarea").change(function() {

alert('Textarea changed');

})

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

Ответ 5

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

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

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

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

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

Вот рабочий пример его магии...

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

Ответ 6

Попробуйте это

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

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

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

Ответ 7

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

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

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