나는 모든 시간을 변경의 내용이 사업부를 가지고, 그것을 수 ajax requests, jquery functions, blur등 등
어떤 시점에서 내 div의 변경 사항을 감지 할 수있는 방법이 있습니까?
간격이나 기본값을 확인하고 싶지 않습니다.
이와 같은 일이
$('mydiv').contentchanged() {
alert('changed')
}답변
timer를 사용하고 innerHTML을 확인하지 않으려면이 이벤트를 시도 할 수 있습니다
$('mydiv').bind('DOMSubtreeModified', function(){
console.log('changed');
});자세한 내용과 브라우저 지원 데이터는 여기에 있습니다.
주의 : 최신 jQuery 버전에서는 bind ()가 더 이상 사용되지 않으므로 대신 on ()을 사용해야합니다.
$('body').on('DOMSubtreeModified', 'mydiv', function(){
console.log('changed');
});답변
자바 스크립트 MutationObserver 사용
//More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
console.log($('mydiv').text());
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);답변
이후 $("#selector").bind()사용되지 않습니다 , 당신은 사용해야합니다 :
$("body").on('DOMSubtreeModified', "#selector", function() {
// code here
});답변
당신은 이것을 시도 할 수 있습니다
$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {
});그러나 이것은 인터넷 익스플로러에서 작동하지 않을 수도 있습니다. 테스트하지 않았습니다.
답변
MutationObserver 또는 Mutation Events를 찾고 있습니다. 어느 곳에서나 지원되지 않으며 개발자 세계가 너무 좋아하지 않습니다.
div의 크기가 변경 될 것임을 알고 (확실하게 확인할 수있는 경우) 크로스 브라우저 resize 이벤트 를 사용할 수 있습니다 .
답변
다음 코드는 저에게 효과적입니다.
$("body").on('DOMSubtreeModified', "mydiv", function() {
alert('changed');
});그것이 누군가를 도울 수 있기를 바랍니다 🙂
답변
이 문제에 대한 해결책은 내장되어 있지 않으며, 이는 디자인 및 코딩 패턴에 문제가 있습니다.
게시자 / 구독자 패턴을 사용할 수 있습니다. 이를 위해 jQuery 사용자 정의 이벤트 또는 자체 이벤트 메커니즘을 사용할 수 있습니다.
먼저,
function changeHtml(selector, html) {
var elem = $(selector);
jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
elem.html(html);
jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}이제 다음과 같이 divhtmlchanging / divhtml 변경된 이벤트를 구독 할 수 있습니다.
$(document).bind('htmlchanging', function (e, data) {
//your before changing html, logic goes here
});
$(document).bind('htmlchanged', function (e, data) {
//your after changed html, logic goes here
});자, 이것을 통해 div 컨텐츠 변경을 변경해야합니다. changeHtml() 기능을 합니다. 따라서 정보를 포함하는 바인딩 콜백 데이터 인수 때문에 그에 따라 필요한 변경을 모니터하거나 수행 할 수 있습니다.
div의 HTML을 다음과 같이 변경해야합니다.
changeHtml('#mydiv', '<p>test content</p>');또한 입력 요소를 제외한 모든 html 요소에 사용할 수 있습니다. 어쨌든 모든 요소와 함께 사용하도록 수정할 수 있습니다.
