복붙노트

[JQUERY] jQuery를 이벤트 : 사업부의 HTML / 텍스트에 대한 변경 사항을 감지

JQUERY

jQuery를 이벤트 : 사업부의 HTML / 텍스트에 대한 변경 사항을 감지

해결법

  1. 1.당신이 innerHTML을을 사용 타이머를 원하는 선택하지 않으면이 이벤트를 시도 할 수 있습니다

    당신이 innerHTML을을 사용 타이머를 원하는 선택하지 않으면이 이벤트를 시도 할 수 있습니다

    $('mydiv').bind('DOMSubtreeModified', function(){
  console.log('changed');
});

    자세한 내용 및 브라우저 지원 datas이 여기에 있습니다.

    주의 : () 대신에 사용한다, 그래서 새로운 jQuery를 버전은 바인드 ()되지 않습니다 :

    $('body').on('DOMSubtreeModified', 'mydiv', function(){
  console.log('changed');
});

  2. 2.자바 스크립트 MutationObserver 사용

    자바 스크립트 MutationObserver 사용

      //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);

  3. 3.. 사용되지 않습니다 $ ( "# 선택") 때문에 바인드 (), 당신은 사용해야합니다 :

    . 사용되지 않습니다 $ ( "# 선택") 때문에 바인드 (), 당신은 사용해야합니다 :

    $("body").on('DOMSubtreeModified', "#selector", function() {
    // code here
});

  4. 4.이 시도 할 수 있습니다

    이 시도 할 수 있습니다

    $('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

    그러나이 힘은 인터넷 익스플로러에서하지 작업, 그것을 테스트하지 않았습니다

  5. 5.당신은 MutationObserver 또는 돌연변이 이벤트를 찾고 있습니다. 어느 쪽도 모든 곳에서 지원되지 않으며 개발자 세상이 너무 사랑스러운에보고된다.

    당신은 MutationObserver 또는 돌연변이 이벤트를 찾고 있습니다. 어느 쪽도 모든 곳에서 지원되지 않으며 개발자 세상이 너무 사랑스러운에보고된다.

    당신은 DIV의 크기가 변경됩니다 알고 (그리고 확인하십시오 할 수 있습니다) 경우, 크로스 브라우저 크기 조절 이벤트를 사용할 수 있습니다.

  6. 6.코드를 따르는 것은 나를 위해 작동합니다.

    코드를 따르는 것은 나를 위해 작동합니다.

    $("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});

    누군가를 도움이되기를 바랍니다 :)

  7. 7.이 문제에 대한 더 붙박이 솔루션이 없다,이 설계 및 코딩 패턴에 문제가 있습니다.

    이 문제에 대한 더 붙박이 솔루션이 없다,이 설계 및 코딩 패턴에 문제가 있습니다.

    당신은 게시자 / 가입자 패턴을 사용할 수 있습니다. 이를 위해 당신은 jQuery를 사용자 정의 이벤트 또는 자신의 이벤트 메커니즘을 사용할 수 있습니다.

    먼저,

    function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

    지금 당신은, 다음과 같은 / divhtmlchanged 이벤트를 divhtmlchanging 서브 스크라이브 수 있습니다

    $(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

    지금, 당신은이 changeHtml () 함수를 통해 DIV의 내용 변경을 변경해야합니다. 그래서, 당신은 모니터링 할 수 있습니다 또는 바인드 콜백 데이터 인수가 정보를 포함하고 따라하기 때문에 필요한 변경을 할 수 있습니다.

    이처럼 사업부의 HTML을 변경해야합니다;

    changeHtml('#mydiv', '<p>test content</p>');

    또한, 당신은 입력 요소를 제외한 모든 HTML 요소 (들)이 사용할 수 있습니다. 어쨌든 당신은 어떤 요소 (들)을 사용하려면이 옵션을 수정할 수 있습니다.

  8. 8.모질라에서 제공하는이 코드에서 볼 수,이 블로그 게시물에서 적응으로 사용 MutationObserver

    모질라에서 제공하는이 코드에서 볼 수,이 블로그 게시물에서 적응으로 사용 MutationObserver

    양자 택일로, 당신은이 링크에서 볼 수있는 JQuery와 예제를 사용할 수 있습니다

    크롬 18 세 이상, 파이어 폭스 14 이상, IE 11 +, 사파리 6+

    // Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

  9. 9.당신은 변수에 사업부의 이전 innerHTML을 저장할 수 있습니다. 이전 내용이 현재 내용과 일치 여부를 확인하는 간격을 설정합니다. 이것이 사실이 아닌 경우 뭔가.

    당신은 변수에 사업부의 이전 innerHTML을 저장할 수 있습니다. 이전 내용이 현재 내용과 일치 여부를 확인하는 간격을 설정합니다. 이것이 사실이 아닌 경우 뭔가.

  10. 10.MutationObserver을 시도해보십시오

    MutationObserver을 시도해보십시오

    브라우저 지원 : http://caniuse.com/#feat=mutationobserver

    <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 유형 = "텍스트 / 자바 스크립트"> // MutationRecord의 배열이 변화의 특성을 식별하는 객체 검사 함수 mutationObjectCallback (mutationRecordsList) { CONSOLE.LOG ( "mutationObjectCallback가 호출됩니다."); mutationRecordsList.forEach (함수 (mutationRecord) { CONSOLE.LOG는 ( "돌연변이의 종류 :"+ mutationRecord.type); 경우 ( "속성"=== mutationRecord.type) { 을 console.log ( "올드 속성 값 :"+ mutationRecord.oldValue); } }); } // 관찰자 객체를 생성하고 콜백 함수를 지정 VAR observerObject = 새로운 MutationObserver (mutationObjectCallback); // 시계의 목표는이 #yourUniqueDiv 수 // 우리는 변화를보기 위해 몸을 사용 VAR targetObject =는 document.body; // 등록 관찰하고 DOM 시청을 변경 지정할 수있는 대상 노드 observerObject.observe (targetObject, { 속성 : 사실, attributeFilter : "ID", "DIR"], attributeOldValue : 사실, childList : 사실 }); // 이것은 mutationObjectCallback 함수를 호출 (하지만이 모든 스크립트 후 것 // 범위)을 실행하고있다. 지금은 단순히 변경 정보와 MutationRecord 객체를 큐 targetObject.appendChild (document.createElement ( 'DIV')); // 이제 두 번째 MutationRecord 객체 속성 변경,이 시간이 추가됩니다 targetObject.dir = 'RTL';

  11. 11.배 위에서 주어진 해답의 일부 그러나 그 화재 이벤트를 시도했다. 같은 필요할 수 있습니다 경우 여기에 솔루션을 노력하고 있습니다.

    배 위에서 주어진 해답의 일부 그러나 그 화재 이벤트를 시도했다. 같은 필요할 수 있습니다 경우 여기에 솔루션을 노력하고 있습니다.

    $('mydiv').one('DOMSubtreeModified', function(){
    console.log('changed');
});

  12. 12.직접적으로 .appendChild 기본값 () 함수를 jQuery를 통해 또는 통해 드 DOM-API 여부, 사업부 일부 내용 추가. 당신이 할 수있는 일은 현재 객체의 .appendChild () 함수를 무시하고 그 안에 관찰자를 구현하는 것입니다. 이제 우리 .appendChild () 함수를 재정의 데, 우리는 콘텐츠를 추가 할 수하기 위해 다른 객체에서 해당 기능을 빌릴 필요가있다. 우리에게 다른 사업부의 ()는 .appendChild를 호출 그 때문에 최종적으로 내용을 추가합니다. 당연히는 .removeChild에 대한이 카운트 ().

    직접적으로 .appendChild 기본값 () 함수를 jQuery를 통해 또는 통해 드 DOM-API 여부, 사업부 일부 내용 추가. 당신이 할 수있는 일은 현재 객체의 .appendChild () 함수를 무시하고 그 안에 관찰자를 구현하는 것입니다. 이제 우리 .appendChild () 함수를 재정의 데, 우리는 콘텐츠를 추가 할 수하기 위해 다른 객체에서 해당 기능을 빌릴 필요가있다. 우리에게 다른 사업부의 ()는 .appendChild를 호출 그 때문에 최종적으로 내용을 추가합니다. 당연히는 .removeChild에 대한이 카운트 ().

    var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

    여기에서 당신은 경험이없는 예를 찾을 수 있습니다. 당신은 그것을 스스로 같아요 확장 할 수 있습니다. http://jsfiddle.net/RKLmA/31/

    그런데이 쇼 자바 스크립트는 열림 닫힘 원리를 컴파일합니다. :)

    13. from https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 사용하여 드롭 다운의 항목의 선택 값을 가져옵니다  (0) 2020.09.29
[JQUERY] DIV의 크기는 어떻게 변경 감지하는?  (0) 2020.09.29
[JQUERY] 는 DOM 요소가 제거 된 경우, 그 청취자는 메모리에서 제거된다?  (0) 2020.09.29
[JQUERY] jQuery를 선택기에서 와일드 카드  (0) 2020.09.29
[JQUERY] jQuery를 사용하여 HTML 요소를 만들 수있는 가장 효율적인 방법은 무엇입니까?  (0) 2020.09.29
,

티스토리툴바