jQuery Event: ตรวจจับการเปลี่ยนแปลงใน html / text ของ div

ฉันมี div ซึ่งมีเนื้อหาเปลี่ยนแปลงอยู่ตลอดเวลาไม่ว่าจะเป็นajax requests, jquery functions, blurฯลฯ เป็นต้น

มีวิธีที่ฉันสามารถตรวจจับการเปลี่ยนแปลงใด ๆ ใน div ของฉันได้ตลอดเวลาหรือไม่?

ฉันไม่ต้องการใช้ช่วงเวลาหรือการตรวจสอบค่าเริ่มต้น

สิ่งนี้จะทำ

$('mydiv').contentchanged() {
 alert('changed')
}

หากคุณไม่ต้องการใช้ตัวจับเวลาและตรวจสอบ InnerHTML คุณสามารถลองกิจกรรมนี้ได้

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

รายละเอียดเพิ่มเติมและข้อมูลการสนับสนุนเบราว์เซอร์ที่นี่

ข้อควรสนใจ:ใน jQuery เวอร์ชันใหม่กว่าผูก () เลิกใช้แล้วดังนั้นคุณควรใช้กับ () แทน:

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

ใช้ Javascript 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);

เนื่องจาก$("#selector").bind()เลิกใช้แล้วคุณควรใช้:

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

คุณสามารถลองสิ่งนี้

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

});

แต่สิ่งนี้อาจไม่ทำงานใน internet explorer ไม่ได้ทำการทดสอบ

คุณกำลังมองหาMutationObserverหรือการกลายพันธุ์เหตุการณ์ ไม่ได้รับการสนับสนุนในทุกที่และไม่ได้รับการสนับสนุนจากโลกของนักพัฒนา

หากคุณรู้ (และสามารถมั่นใจได้ว่า) ขนาดของ div จะเปลี่ยนไปคุณอาจสามารถใช้การปรับขนาด crossbrowserได้

รหัสต่อไปนี้ทำงานให้ฉัน

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

หวังว่ามันจะช่วยให้ใครบางคน :)

ไม่มีวิธีแก้ปัญหาแบบ inbuilt ปัญหานี้เป็นปัญหากับการออกแบบและรูปแบบการเข้ารหัสของคุณ

คุณสามารถใช้รูปแบบผู้เผยแพร่ / สมาชิก สำหรับสิ่งนี้คุณสามารถใช้เหตุการณ์ที่กำหนดเอง 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 });
}

ตอนนี้คุณสามารถสมัครสมาชิก divhtmlchanging / divhtmlchanged เหตุการณ์ดังต่อไปนี้

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

ตอนนี้คุณต้องเปลี่ยนการเปลี่ยนแปลงเนื้อหา div ผ่านchangeHtml()ฟังก์ชั่นนี้ ดังนั้นคุณสามารถตรวจสอบหรือสามารถทำการเปลี่ยนแปลงที่จำเป็นตามเพราะผูกอาร์กิวเมนต์ข้อมูลโทรกลับที่มีข้อมูล

คุณต้องเปลี่ยน html div ของคุณเช่นนี้

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

และคุณสามารถใช้สิ่งนี้กับองค์ประกอบ html ใด ๆ ยกเว้นองค์ประกอบอินพุต อย่างไรก็ตามคุณสามารถแก้ไขสิ่งนี้เพื่อใช้กับองค์ประกอบใด ๆ

ใช้MutationObserverตามที่เห็นในตัวอย่างนี้จัดทำโดยMozillaและดัดแปลงจากโพสต์บล็อก

หรือคุณสามารถใช้ตัวอย่าง JQuery ที่เห็นในลิงค์นี้

Chrome 18+, Firefox 14+, IE 11+, Safari 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();

คุณสามารถเก็บ InnerHTML เก่าของ div ในตัวแปรได้ กำหนดช่วงเวลาเพื่อตรวจสอบว่าเนื้อหาเก่าตรงกับเนื้อหาปัจจุบันหรือไม่ เมื่อสิ่งนี้ไม่เป็นความจริงให้ทำอะไรสักอย่าง

ลอง MutationObserver:

• https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

การสนับสนุนเบราว์เซอร์: http://caniuse.com/#feat=mutationobserver

<html>
  <!-- example from Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ -->

  <head>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}
      
// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

      // the target to watch, this could be #yourUniqueDiv 
      // we use the body to watch for changes
var targetObject = document.body; 
      
// Register the target node to observe and specify which DOM changes to watch
      
      
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


      </script>
    </body>
  </html>

การเพิ่มเนื้อหาบางส่วนให้กับ div ไม่ว่าจะผ่าน jQuery หรือผ่าน de DOM-API โดยตรงจะใช้ค่าเริ่มต้นใน.appendChild()ฟังก์ชัน สิ่งที่คุณสามารถทำได้คือแทนที่.appendChild()ฟังก์ชั่นของวัตถุปัจจุบันและนำผู้สังเกตการณ์มาใช้ ตอนนี้แทนที่.appendChild()ฟังก์ชันของเราแล้วเราต้องยืมฟังก์ชันนั้นจากวัตถุอื่นเพื่อให้สามารถผนวกเนื้อหา ด้วยเหตุนี้เราจึงเรียกตัวแทน.appendChild()ของอีกฝ่ายหนึ่งมาผนวกท้ายเนื้อหา ofcourse .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/

โดยวิธีการนี :)