[JQUERY] jQuery로 요소의 내용의 변화를 감지

jQuery로 요소의 내용의 변화를 감지

해결법

1. ---

   1.이러한 돌연변이 이벤트입니다.

   이러한 돌연변이 이벤트입니다.

   내가 jQuery를에 돌연변이 이벤트 API를 사용하지 않은, 그러나 피상적 검색 GitHub의에이 프로젝트를 알려준. 나는 프로젝트의 성숙의 인식입니다.

2. ---

   2.이 게시물은 세 알지만, 나는 비슷한 문제가있는 사람들에 다른 솔루션 접근 방식을 제공하고 싶습니다 :

   이 게시물은 세 알지만, 나는 비슷한 문제가있는 사람들에 다른 솔루션 접근 방식을 제공하고 싶습니다 :

   여기에 jQuery를 트리거 핸들러에 대한 링크는 다음과 같습니다 http://api.jquery.com/triggerHandler/

3. ---

   3.브라우저는

   요소의 onchange를 이벤트가 발생하지 않습니다.

   브라우저는

   요소의 onchange를 이벤트가 발생하지 않습니다.

   나는이 뒤에 추론 자바 스크립트에 의해 수정되지 않는 한 이러한 요소가 변경되지 않습니다 생각합니다. 이미 요소 자신 (이 아니라 그 일을 사용자)를 수정해야하는 경우에, 당신은 당신이 지금과 같은 요소를 수정하는 것이 동시에 코드와 함께 제공되는 적절한를 호출 할 수 있습니다 :

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

   당신은 또한 수동으로이 같은 이벤트를 발생 수 :

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

   두 방법 모두 상황에 작업하는 경우, 당신은 당신이 구체적으로 달성하려고하는 사항에 대한 자세한 정보를 제공하시기 바랍니다 수 있을까?

4. ---

   4.무엇 http://jsbin.com/esepal/2에 대한

   무엇 http://jsbin.com/esepal/2에 대한

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

5. ---

   5.테스트는 또한 DOM의 한 부분 그대로 DOMSubtreeModified 이벤트 seeign에 결합 해보십시오.

   테스트는 또한 DOM의 한 부분 그대로 DOMSubtreeModified 이벤트 seeign에 결합 해보십시오.

   SO에 여기 게시물을 참조 :

   어떻게 - - 난 - 모니터 - 더 - DOM를 위해 변경

6. ---

   6.이 시도, 그것은 제임스 Padolsey (여기에 SO에 J-P)에 의해 생성하고 (내 생각) 원하는 정확히 수행

   이 시도, 그것은 제임스 Padolsey (여기에 SO에 J-P)에 의해 생성하고 (내 생각) 원하는 정확히 수행

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

7. ---

   7.그리고 HTML5와 우리는 기본 DOM 돌연변이 관측이있다.

   그리고 HTML5와 우리는 기본 DOM 돌연변이 관측이있다.

8. ---

   8.그러나 디버깅 언급하는 데 유용합니다 - 그것은 엄격하게 jQuery를 대답이 아니다.

   그러나 디버깅 언급하는 데 유용합니다 - 그것은 엄격하게 jQuery를 대답이 아니다.

   파이어 버그에서 당신은 DOM 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 '특성 변화에 브레이크'설정할 수 있습니다 :

   속성이 스크립트에서 변경 될 때, 디버그 창이 나타납니다 당신은 그것을 일이 일어나고 무엇을 추적 할 수 있습니다. (unhelpfully screengrab에 팝업에 의해 가려) 아래의 요소 삽입 및 요소 제거를위한 옵션도 있습니다.

9. ---

   9.나는 DOM 돌연변이 이벤트의 사용을 단순화하기위한 작은 JS 라이브러리라는 mutabor을 (https://github.com/eskat0n/mutabor) 개발하고 있어요. 예제 demo.html 참조하십시오.

   나는 DOM 돌연변이 이벤트의 사용을 단순화하기위한 작은 JS 라이브러리라는 mutabor을 (https://github.com/eskat0n/mutabor) 개발하고 있어요. 예제 demo.html 참조하십시오.

10. ---

    10.livequery 플러그인을 사용해보십시오. 그건 내가 뭐하는 거지 비슷한 뭔가를 작동하는 것 같다.

    livequery 플러그인을 사용해보십시오. 그건 내가 뭐하는 거지 비슷한 뭔가를 작동하는 것 같다.

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

11. ---

    11.종종이를 달성 할 수있는 간단하고 효과적인 방법은 DOM을 수정하는시기와 장소를 추적하는 것입니다.

    종종이를 달성 할 수있는 간단하고 효과적인 방법은 DOM을 수정하는시기와 장소를 추적하는 것입니다.

    당신은 항상 DOM을 수정에 대한 책임이 중앙의 한 기능을 생성하여이 작업을 수행 할 수 있습니다. 그런 다음이 함수 내에서 수정 된 요소에 무엇을해야 정리 않습니다.

    내가 수정 된 요소에 클래스를 추가하려면 handly 부하 () 함수에 대한 콜백을 사용 후 setInterval을 타이머와 수정 된 모든 요소를 ​​몇 초마다 업데이트 있도록 최근의 응용 프로그램에서, 나는 즉각적인 조치를 필요로하지 않았다.

    $($location).load("my URL", "", $location.addClass("dommodified"));
    

    당신이 원하는 그러나 당신은 그것을 처리 할 수 ​​있습니다 - 예를 들어,

    setInterval("handlemodifiedstuff();", 3000); 
    function handlemodifiedstuff()
    {
        $(".dommodified").each(function(){/* Do stuff with $(this) */});
    }
    

12. ---

    12.당신은 (모든, 또는) 기능을 HTML로 콜백 옵션을 추가 할 수 있습니다 :

    당신은 (모든, 또는) 기능을 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");});
    

    여기 데모.

    당신은 몇 가지 요소에 변화를 수행하지 요소는 당신이 캐치를 가지고 무언가에 의해 변경해야한다.

13. ---

    13.나는 이벤트에 요소의 변화를 확인하는 조각을 썼다.

    나는 이벤트에 요소의 변화를 확인하는 조각을 썼다.

    그래서 당신은 타사 자바 스크립트 코드 또는 무언가를 사용하고 뭔가 나타나거나 변경 당신은 당신이 할 수있는 클릭 한 때 때 알 필요가 있다면.

    아래의 미리보기를 들어, 당신이 버튼을 클릭 한 후 테이블의 내용이 변경 될 때 알 필요가 말할 수 있습니다.

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

    의사 코드 :

14. ---

    14.우리는 돌연변이 이벤트를 사용하여이 작업을 수행 할 수 있습니다. www.w3.org에있어서, 상기 변이 이벤트 모듈 ATTR 텍스트 수정을 포함하는 문서의 구조에 대한 변경의 통지를 할 수 있도록 설계된다. 자세한 내용 돌연변이 이벤트

    우리는 돌연변이 이벤트를 사용하여이 작업을 수행 할 수 있습니다. www.w3.org에있어서, 상기 변이 이벤트 모듈 ATTR 텍스트 수정을 포함하는 문서의 구조에 대한 변경의 통지를 할 수 있도록 설계된다. 자세한 내용 돌연변이 이벤트

    예를 들면 :

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

15. ---

    15.하지 수, 나는 즉, 콘텐츠 변경 이벤트를 가지고 있다고 생각하지만 확실히 X-브라우저입니다

    하지 수, 나는 즉, 콘텐츠 변경 이벤트를 가지고 있다고 생각하지만 확실히 X-브라우저입니다

    나는 백그라운드에서 멀리 걷 겠죠 성가신 간격없이 가능하지 말해야한다!

from https://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery by cc-by-sa and MIT license