change() работает и обнаруживает изменения в элементах формы, но существует ли способ обнаружения, когда был изменен контент элемента DOM?
Это не работает, если #content не является элементом формы
$("#content").change( function(){
// do something
});
Я хочу, чтобы это срабатывало при выполнении чего-то вроде:
$("#content").html('something');
Также функция html() или append() не имеет обратного вызова.
Любые предложения?
Это события мутации.
Я не использовал API событий мутации в jQuery, но беглый поиск привел меня к этому проекту на GitHub. Я не знаю о зрелости проекта.
Я знаю, что этот пост - год, но я хотел бы предложить другой подход к решению тех, у кого есть аналогичная проблема:
Событие изменения jQuery используется только для полей ввода пользователя, потому что, если что-то еще управляется (например, div), эта манипуляция исходит из кода. Итак, найдите, где происходит манипуляция, а затем добавьте все, что вам нужно.
Но если это невозможно по какой-либо причине (вы используете сложный плагин или не можете найти какие-либо возможности "обратного вызова" ), то метод jQuery, который я предлагаю, следующий:
а. Для простой манипуляции с DOM используйте цепочку jQuery и перемещение, $("#content").html('something').end().find(whatever)....
б. Если вы хотите сделать что-то еще, используйте jQuery bind с настраиваемым событием и triggerHandler
$("#content").html('something').triggerHandler('customAction');
$('#content').unbind().bind('customAction', function(event, data) {
//Custom-action
});
Здесь ссылка на обработчик триггера jQuery: http://api.jquery.com/triggerHandler/
как насчет http://jsbin.com/esepal/2
$(document).bind("DOMSubtreeModified",function(){
console.log($('body').width() + ' x '+$('body').height());
})
Это событие устарело в пользу API-интерфейс Mutation Observer
Браузер не будет запускать событие onchange для элементов <div>.
Я думаю, что причина в том, что эти элементы не изменятся, если они не будут изменены javascript. Если вам уже нужно изменить элемент самостоятельно (а не пользователь), вы можете просто вызвать соответствующий сопроводительный код одновременно с модификацией элемента, например:
$("#content").html('something').each(function() { });
Вы также можете вручную запустить событие, подобное этому:
$("#content").html('something').change();
Если ни одно из этих решений не работает для вашей ситуации, не могли бы вы предоставить дополнительную информацию о том, что вы конкретно пытаетесь выполнить?
Попробуйте привязать к значению события DOMSubtreeModified, поскольку тест также является частью DOM.
см. этот пост здесь SO:
Попробуйте это, он был создан Джеймсом Падольси (J-P здесь на SO) и делает именно то, что вы хотите (я думаю)
http://james.padolsey.com/javascript/monitoring-dom-properties/
И с HTML5 мы имеем встроенные наблюдатели MOM-данных DOM.
Это не строго ответ jQuery - но полезно упомянуть для отладки.
В Firebug вы можете щелкнуть правой кнопкой мыши по элементу в дереве DOM и настроить "Break on Attribute Change":
Когда атрибут изменен в script, появится окно отладки, и вы сможете отслеживать, что происходит. Существует также опция для вставки элементов и удаления элементов ниже (бесполезно скрывается всплывающим окном в screengrab).
Попробуйте плагин livequery. Это похоже на то, что я делаю.
Я разрабатываю крошечную JS-библиотеку под названием mutabor (https://github.com/eskat0n/mutabor), которая предназначена для упрощения использования DOM Mutation Events. См. Примеры demo.html.
Часто простым и эффективным способом достижения этого является отслеживание того, когда и где вы изменяете DOM.
Вы можете сделать это, создав одну центральную функцию, которая всегда отвечает за изменение DOM. Затем вы выполняете любую очистку, необходимую для модифицированного элемента, внутри этой функции.
В недавнем приложении мне не нужны немедленные действия, поэтому я использовал обратный вызов для функции handly load(), чтобы добавить класс к любым модифицированным элементам, а затем обновлять все измененные элементы каждые несколько секунд таймером setInterval.
$($location).load("my URL", "", $location.addClass("dommodified"));
Затем вы можете обрабатывать его, как хотите - например,
setInterval("handlemodifiedstuff();", 3000);
function handlemodifiedstuff()
{
$(".dommodified").each(function(){/* Do stuff with $(this) */});
}
Вы можете добавить функцию обратного вызова в html (или любую) функцию:
$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
fn = fn || function(){};
var result = this.oldHtml(html);
fn();
return result;
};
$('body').html(11,function(){alert("haha");});
Вы выполняете изменение на каком-то элементе, а не на том, что элемент вынужден изменить что-то, что вам нужно поймать.
Я написал фрагмент, который будет проверять изменение элемента в событии.
Итак, если вы используете сторонний код javascript или что-то еще, и вам нужно знать, когда что-то появляется или изменяется, когда вы нажали, вы можете.
В приведенном ниже фрагменте скажем, вам нужно знать, когда изменяется содержимое таблицы после нажатия кнопки.
$('.button').live('click', function() {
var tableHtml = $('#table > tbody').html();
var timeout = window.setInterval(function(){
if (tableHtml != $('#table > tbody').
console.log('no change');
} else {
console.log('table changed!');
clearInterval(timeout);
}
}, 10);
});
Псевдокод:
Мы можем достичь этого, используя События мутации. Согласно www.w3.org, модуль событий мутации предназначен для уведомления о любых изменениях структуры документа, включая изменения attr и текста. Для более подробной информации СОБЫТИЯ МУТАЦИИ
Пример:
$("body").on('DOMSubtreeModified', "#content", function() {
alert('Content Modified'); // do something
});
Невозможно, я считаю, что есть событие с измененным содержимым, но это, безусловно, не x-браузер
Если я скажу, что это невозможно без какого-либо неприятного интервала, отрывающегося в фоновом режиме!