jQuery로 요소 컨텐츠 변경 감지

jQuery로 요소 컨텐츠 변경 감지

---

change() 함수가 작동하고 양식 요소의 변경 사항을 감지하지만 DOM 요소의 내용이 변경된 시점을 감지하는 방법이 있습니까?

#content양식 요소 가 아닌 한 작동하지 않습니다.

$("#content").change( function(){
    // do something
});

나는 이것을 다음과 같이 할 때 트리거하기를 원한다.

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

또한 html()또는 append()함수에는 콜백이 없습니다.

어떤 제안?

---

이것들은 돌연변이 사건 입니다.

jQuery에서 돌연변이 이벤트 API를 사용하지 않았지만 커서 검색을 통해 GitHub 에서이 프로젝트로 이동 했습니다. 나는 프로젝트의 성숙도를 모른다.

---

이 게시물이 1 년 된 것을 알고 있지만 비슷한 문제가있는 사람들에게 다른 솔루션 접근 방식을 제공하고 싶습니다.

1. jQuery 변경 이벤트는 사용자 입력 필드에서만 사용됩니다. 다른 조작 (예 : div)이 있으면 해당 조작이 코드에서 발생하기 때문입니다. 따라서 조작이 발생하는 위치를 찾은 다음 필요한 부분을 추가하십시오.

2. 그러나 어떤 이유로 든 불가능한 경우 (복잡한 플러그인을 사용 중이거나 "콜백"가능성을 찾을 수없는 경우) 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());
})

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

---

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

이것의 이유는 자바 스크립트로 수정하지 않으면 이러한 요소가 변경되지 않는다고 생각합니다. 사용자가 아닌 요소를 직접 수정해야하는 경우 요소를 수정하는 동시에 해당 코드를 호출하면됩니다.

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

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

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

위의 해결 방법 중 어느 것도 귀하의 상황에 적합한 것이 아니라면, 구체적으로 달성하려는 것에 대해 더 많은 정보를 제공 할 수 있습니까?

---

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

SO에 대한이 게시물을 참조하십시오.

변경 사항을 모니터링하는 방법

---

이것을보십시오, James Padolsey (JP here SO)에 의해 작성되었으며 원하는 것을 정확하게 수행합니다 (제 생각에)

http://james.padolsey.com/javascript/monitoring-dom-properties/

---

그리고 HTML5에는 네이티브 DOM 돌연변이 관찰자가 있습니다.

---

엄격하게 jQuery 답변은 아니지만 디버깅에 언급하는 것이 좋습니다.

Firebug에서는 DOM 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 '속성 변경시 브레이크'를 설정할 수 있습니다.

스크립트에서 속성이 변경되면 디버그 창이 나타나고 진행 상황을 추적 할 수 있습니다. 아래에 요소 삽입 및 요소 제거 옵션이 있습니다 (스크린 그래프의 팝업으로 인해 도움이되지 않음).

---

livequery 플러그인을 사용해보십시오. 그것은 내가하고있는 비슷한 일을하는 것 같습니다.

http://docs.jquery.com/Plugins/livequery

---

DOM 돌연변이 이벤트의 사용을 단순화하기 위해 mutabor ( https://github.com/eskat0n/mutabor ) 라는 작은 JS 라이브러리를 개발 중입니다. 예제는 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");});

여기 데모.

You do the change on some element, not the element is forced to change by something that you have to catch.

---

I wrote a snippet that will check for the change of an element on an event.

So if you are using third party javascript code or something and you need to know when something appears or changes when you have clicked then you can.

For the below snippet, lets say you need to know when a table content changes after you clicked a button.

$('.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);
        });

Pseudo Code:

• Once you click a button
• the html of the element you are expecting to change is captured
• we then continually check the html of the element
• when we find the html to be different we stop the checking

---

돌연변이 이벤트 를 사용하여이를 달성 할 수 있습니다 . www.w3.org에 따르면, 변이 이벤트 모듈은 속성 및 텍스트 수정을 포함하여 문서 구조의 변경 사항을 통지 할 수 있도록 설계되었습니다. 자세한 내용은 돌연변이 이벤트

예를 들어 :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

---

불가능합니다, 즉 컨텐츠 변경 이벤트가 있다고 생각하지만 확실히 x 브라우저는 아닙니다.

불쾌한 간격이 백그라운드에서 사라지지 않으면 불가능하다고 말해야합니까!

참고 URL : https://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery