div 변경시 jQuery 이벤트 발생

div 변경시 jQuery 이벤트 발생

---

콘텐츠가 다양한 방식으로 변경 될 수있는 div가 있습니다. 예를 들어 전체 콘텐츠가 innerHTML을 통해 다시로드되거나 DOM 메서드를 통해 노드가 추가 될 수 있습니다. 이는 네이티브 자바 스크립트를 통해 또는 jQuery API 호출 또는 다른 라이브러리를 통해 간접적으로 발생할 수 있습니다.

나는 DIV의 내용이 변경 될 때 어떤 코드를 실행하려면,하지만 난이없는 전혀 제어 에 방법 이 변경됩니다. 실제로 저는 자신이 선호하는 방식으로 div의 내용을 자유롭게 변경할 수있는 다른 사람들이 사용할 수있는 위젯을 디자인하고 있습니다. 이 div의 내부 내용이 변경되면 위젯의 모양도 업데이트해야 할 수 있습니다.

jQuery를 사용하고 있습니다. 이 div의 내용이 변경된 이벤트를 캡처하는 방법이 있습니까?

---

및를 사용 DOMNodeInserted하여 DOMNodeRemoved요소가 추가 또는 제거되었는지 확인할 수 있습니다 . 불행히도 IE는 이것을 지원하지 않습니다.

$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

---

최신 정보

을 사용하여 초기 내용과 향후 변경 사항을 저장할 수 .data()있습니다. 여기에 예가 있습니다.

var div_eTypes = [],
    div_changes = [];
$(function() {
    $('#myDiv').each(function() {
        this['data-initialContents'] = this.innerHTML;
    }).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
        div_eTypes.concat(e.type.match(/insert|remove/));
        div_changes.concat(this.innerHTML);
    });
});

출력 예 :

> $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]

---

업데이트 2

당신은 포함 할 수 있습니다 DOMSubtreeModified나는 것을 발견했기 때문에,뿐만 아니라 DOMNodeInserted및 DOMNodeRemoved요소의이 경우 트리거를하지 않는 innerHTML직접 대체됩니다. IE에서는 여전히 작동하지 않지만 적어도 다른 브라우저에서는 제대로 작동합니다.

---

이렇게 해봐 ...

    $('#divId').bind('DOMNodeInserted', function(event) {
             alert('inserted ' + event.target.nodeName + // new node
           ' in ' + event.relatedNode.nodeName); // parent
       });

IE는이 속성을 지원하지 않지만 가장 가까운 propertychange이벤트는 요소의 속성 또는 CSS 속성 변경에 대한 응답으로 발생 한다고 생각 하지만 innerHTML 변경에 대한 응답으로 발생하지 않습니다. 당신이 원하는 것에 가깝습니다.

또 하나의 가능한 해결책은 jquery의 조작 기능을 재정의하는 것입니다.

이 토론을 살펴보십시오 .. 아직 생성되지 않은 요소 (이벤트 외에)를 수정하는 선호하는 방법

---

자바 스크립트 나 jQuery에는 이러한 이벤트 (onChange)가 없으므로 사용자 지정 이벤트를 만들어야합니다.

한 가지 솔루션은 lowpro를 사용하여 제어하려는 요소에 동작을 첨부 할 수 있습니다.이 동작은 요소를 직렬화 한 다음 요소가 변경되었는지 확인하기 위해 x 밀리 초마다 확인하는 폴링을 빌드하고 변경된 경우 사용자 지정 이벤트를 트리거합니다. 그 요소에.

여기에 jQuery와 함께 lowpro를 사용하는 방법에 대한 몇 가지 예가 있습니다. http://www.learningjquery.com/2008/05/using-low-pro-for-jquery

행운을 빕니다!

참고URL : https://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change