change() 함수가 작동하고 양식 요소의 변경을 감지하지만 DOM 요소의 컨텐츠가 변경된시기를 감지하는 방법이 있습니까?
#content양식 요소 가 아닌 경우 작동하지 않습니다.
$("#content").change( function(){
// do something
});나는 다음과 같은 일을 할 때 이것이 트리거되기를 원합니다.
$("#content").html('something');또한 html()또는 append()함수에는 콜백이 없습니다.
어떤 제안?
답변:
이것들은 돌연변이 사건 입니다.
jQuery에서 돌연변이 이벤트 API를 사용하지 않았지만 간단한 검색 으로 GitHub 에서이 프로젝트로 이동 했습니다. 나는 프로젝트의 성숙도를 모른다.
이 게시물은 1 년이 지났지 만 비슷한 문제가있는 사람들에게 다른 솔루션 접근 방식을 제공하고 싶습니다.
jQuery 변경 이벤트는 다른 것이 조작되면 (예 : div) 해당 조작이 코드에서 발생하기 때문에 사용자 입력 필드에서만 사용됩니다. 따라서 조작이 발생하는 위치를 찾은 다음 거기에 필요한 것을 추가하십시오.
그러나 어떤 이유로 든 가능하지 않다면 (복잡한 플러그인을 사용하고 있거나 "콜백"가능성을 찾을 수없는 경우) 내가 제안하는 jQuery 접근 방식은 다음과 같습니다.
ㅏ. 간단한 DOM 조작의 경우 jQuery 체인 및 순회를 사용하십시오.$("#content").html('something').end().find(whatever)....
비. 다른 작업을 수행하려면 bind사용자 지정 이벤트와 함께 jQuery를 사용 하고triggerHandler
$("#content").html('something').triggerHandler('customAction');
$('#content').unbind().bind('customAction', function(event, data) {
//Custom-action
});다음은 jQuery 트리거 핸들러에 대한 링크입니다. http://api.jquery.com/triggerHandler/
bind처리기가 bool.
브라우저는 <div>요소에 대한 onchange 이벤트를 시작하지 않습니다 .
그 이유는 자바 스크립트로 수정하지 않는 한 이러한 요소가 변경되지 않는다는 것입니다. 이미 요소를 수정해야하는 경우 (사용자가 수행하지 않고) 다음과 같이 요소를 수정하는 동시에 적절한 동반 코드를 호출 할 수 있습니다.
$("#content").html('something').each(function() { });다음과 같은 이벤트를 수동으로 실행할 수도 있습니다.
$("#content").html('something').change();이러한 솔루션 중 어느 것도 귀하의 상황에 적합하지 않은 경우 구체적으로 달성하려는 작업에 대해 더 많은 정보를 제공 할 수 있습니까?
http://jsbin.com/esepal/2는 어떻 습니까?
$(document).bind("DOMSubtreeModified",function(){
console.log($('body').width() + ' x '+$('body').height());
})이 이벤트는 Mutation Observer API 를 위해 더 이상 사용되지 않습니다.
이것을 시도해보십시오, 그것은 James Padolsey (JP here on SO)에 의해 만들어졌으며 정확히 원하는 것을 수행합니다 (제 생각에)
http://james.padolsey.com/javascript/monitoring-dom-properties/
엄격하게 jQuery 대답은 아니지만 디버깅에 대해 언급하는 데 유용합니다.
Firebug에서 DOM 트리의 요소를 마우스 오른쪽 버튼으로 클릭하고 'Break on Attribute Change'를 설정할 수 있습니다.
스크립트에서 속성이 변경되면 디버그 창이 나타나고 진행 상황을 추적 할 수 있습니다. 또한 아래에 요소 삽입 및 요소 제거 옵션이 있습니다 (screengrab의 팝업으로 인해 가려지지 않음).
DOM Mutation Events 사용을 단순화하기 위해 mutabor ( https://github.com/eskat0n/mutabor ) 라는 작은 JS 라이브러리를 개발 중입니다. 예제는 demo.html을 참조하십시오.
livequery 플러그인을 사용해보십시오. 그것은 내가하고있는 것과 비슷한 일을하는 것 같습니다.
이를 달성하는 간단하고 효과적인 방법은 DOM을 수정하는시기와 위치를 추적하는 것입니다.
DOM 수정을 항상 담당하는 하나의 중앙 함수를 만들어이를 수행 할 수 있습니다. 그런 다음이 함수 내에서 수정 된 요소에 필요한 정리를 수행합니다.
최근 애플리케이션에서는 즉각적인 조치가 필요하지 않았기 때문에 직접 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");});어떤 요소에 대해 변경을 수행합니다. 요소가 포착해야하는 것에 의해 강제로 변경되지는 않습니다.
이벤트에서 요소의 변경을 확인하는 스 니펫을 작성했습니다.
따라서 타사 자바 스크립트 코드 또는 무언가를 사용하고 있으며 클릭했을 때 무언가가 나타나거나 변경되는 시점을 알아야 할 경우 할 수 있습니다.
아래 스 니펫의 경우 버튼을 클릭 한 후 테이블 내용이 변경되는시기를 알아야한다고 가정 해 보겠습니다.
$('.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);
});의사 코드 :
Mutation Events 를 사용하여이를 달성 할 수 있습니다 . www.w3.org에 따르면, 변형 이벤트 모듈은 속성 및 텍스트 수정을 포함하여 문서 구조의 변경 사항에 대한 알림을 허용하도록 설계되었습니다. 자세한 내용은 MUTATION EVENTS
예 :
$("body").on('DOMSubtreeModified', "#content", function() {
alert('Content Modified'); // do something
});불가능합니다. 즉, 콘텐츠 변경 이벤트가 있다고 생각하지만 확실히 x- 브라우저가 아닙니다.
배경에서 쫓아가는 불쾌한 간격 없이는 불가능하다고 말해야할까요!