[javascript] jQuery로 요소 콘텐츠 변경 감지

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/

브라우저는 <div>요소에 대한 onchange 이벤트를 시작하지 않습니다 .

그 이유는 자바 스크립트로 수정하지 않는 한 이러한 요소가 변경되지 않는다는 것입니다. 이미 요소를 수정해야하는 경우 (사용자가 수행하지 않고) 다음과 같이 요소를 수정하는 동시에 적절한 동반 코드를 호출 할 수 있습니다.

 $("#content").html('something').each(function() { });

다음과 같은 이벤트를 수동으로 실행할 수도 있습니다.

 $("#content").html('something').change();

이러한 솔루션 중 어느 것도 귀하의 상황에 적합하지 않은 경우 구체적으로 달성하려는 작업에 대해 더 많은 정보를 제공 할 수 있습니까?

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

이 이벤트는 Mutation Observer API 를 위해 더 이상 사용되지 않습니다.

DOMSubtreeModified테스트는 DOM의 일부일 뿐이므로 이벤트 seeign 에 바인딩하십시오 .

여기 에이 게시물을 참조하십시오.

이것을 시도해보십시오, 그것은 James Padolsey (JP here on SO)에 의해 만들어졌으며 정확히 원하는 것을 수행합니다 (제 생각에)