jQuery를 사용하여 요소 내용 변경 탐지

jQuery를 사용하여 요소 내용 변경 탐지

change()기능이 작동하고 폼 요소의 변경을 감지하지만, DOM 요소의 내용이 변경되었을 때 감지할 수 있는 방법이 있습니까?

이것은 작동하지 않습니다, 그렇지 않으면#content입니다.

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

다음과 같은 작업을 수행할 때 이 작업을 트리거합니다.

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

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

좋은 의견이라도 있나?

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

1. jQuery 변경 이벤트는 사용자 입력 필드에서만 사용됩니다. 왜냐하면 다른 항목이 조작되면(예: div) 해당 조작은 코드에서 발생하기 때문입니다.따라서, 조작이 발생하는 위치를 찾은 다음 필요한 것을 추가합니다.

2. 하지만 어떤 이유로든 (복잡한 플러그인을 사용하고 있거나 "콜백" 가능성을 찾을 수 없는 경우) 제가 제안하는 jQuery 접근 방식은 다음과 같습니다.

   DOM and "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/

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

저는 jQuery에서 돌연변이 이벤트 API를 사용하지 않았지만, 대충 검색한 결과 GitHub에서 이 프로젝트로 이동했습니다.저는 그 프로젝트의 완성도를 모릅니다.

http://jsbin.com/esepal/2 는 어떻습니까?

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

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

는 브우가다기동변안시경이않실습다니행지하벤를트라에 대한 onchange .<div>요소들.

자바스크립트로 수정하지 않는 한 이러한 요소들은 변하지 않을 것이라는 것이 이 배경의 이유라고 생각합니다.이미 요소를 수정해야 하는 경우(사용자가 수정하지 않고) 요소를 수정하는 동시에 다음과 같이 적절한 코드를 호출할 수 있습니다.

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

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

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

이러한 솔루션 중 어느 것도 귀사의 상황에 적합하지 않은 경우, 구체적으로 무엇을 달성하고자 하는지에 대한 자세한 정보를 제공해 주시겠습니까?

에 바인딩을 시도합니다.DOMSubtreeModified이벤트 seeign as test 또한 DOM의 일부일 뿐입니다.

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

변화를 감시하는 방법

이것을 시도해 보세요, 그것은 제임스 파돌시(J-P on SO)에 의해 만들어졌고 당신이 원하는 것을 정확히 수행합니다(제 생각에는).

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

그리고 HTML5를 사용하면 네이티브 DOM 돌연변이 옵저버가 있습니다.

이것은 엄밀하게 jQuery 답변은 아니지만 디버깅에 유용합니다.

Firebug에서 DOM 트리의 요소를 마우스 오른쪽 버튼으로 클릭하고 'Break on Attribute Change'를 설정할 수 있습니다.

스크립트에서 속성이 변경되면 디버그 창이 나타나고 해당 속성이 무엇인지 추적할 수 있습니다.아래에는 요소 삽입 및 요소 제거 옵션도 있습니다(화면 그래프의 팝업에 의해 도움이 되지 않을 정도로 가려짐).

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

라이브 쿼리 플러그인을 사용해 보십시오.그것은 제가 하고 있는 비슷한 일에 효과가 있는 것 같습니다.

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

이를 위해 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");});

여기서 데모.

당신은 어떤 요소에 대해 변화를 하는 것이지, 당신이 잡아야 하는 어떤 것에 의해 그 요소가 강제로 변화되는 것이 아닙니다.

저는 이벤트에서 요소의 변화를 확인할 수 있는 스니펫을 작성했습니다.

그래서 만약 당신이 제3자 자바스크립트 코드 같은 것을 사용하고 있고, 당신이 클릭했을 때 어떤 것이 나타나거나 변경되는지 알아야 한다면, 당신은 할 수 있습니다.

아래 스니펫의 경우 단추를 클릭한 후 테이블 내용이 변경되는 시기를 알아야 합니다.

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

유사 코드:

• 단추를 클릭한 후
• 변경을 예상하는 요소의 html이 캡처되었습니다.
• 그런 다음 요소의 html을 지속적으로 확인합니다.
• HTML이 다르다는 것을 알게 되면 우리는 확인을 중단합니다.

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

예:

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

불가능합니다. ie에 콘텐츠 변경 이벤트가 있는 것 같습니다. 하지만 확실히 x 브라우저는 아닙니다.

내가 뒤에서 짜증나는 간격이 없이는 불가능하다고 말해야 할까요!

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