Sự kiện jQuery: Phát hiện các thay đổi đối với html / văn bản của div

Tôi có một div trong đó có nội dung của nó thay đổi tất cả thời gian, có thể là ajax requests, jquery functions, blurvv vv

Có cách nào để tôi có thể phát hiện bất kỳ thay đổi nào trên div của mình tại bất kỳ thời điểm nào không?

Tôi không muốn sử dụng bất kỳ khoảng thời gian hoặc giá trị mặc định được kiểm tra.

Một cái gì đó như thế này sẽ làm

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

Nếu bạn không muốn sử dụng bộ đếm thời gian và kiểm tra bên trongHTML, bạn có thể thử sự kiện này

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

Thông tin chi tiết và dữ liệu hỗ trợ trình duyệt có tại đây .

Chú ý: trong các phiên bản jQuery mới hơn, bind () không được dùng nữa, vì vậy bạn nên sử dụng on () thay thế:

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

Sử dụng Javascript MutingObserver

  //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);

Vì $("#selector").bind()không được dùng nữa , bạn nên sử dụng:

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

Bạn có thể thử cái này

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

});

nhưng điều này có thể không hoạt động trong internet explorer, chưa thử nghiệm nó

Bạn đang tìm kiếm MutationObserver hoặc đột biến sự kiện . Không được hỗ trợ ở khắp mọi nơi và cũng không được thế giới phát triển ưa chuộng.

Nếu bạn biết (và có thể chắc chắn rằng) kích thước của div sẽ thay đổi, bạn có thể sử dụng sự kiện thay đổi kích thước crossbrowser .

Mã sau làm việc cho tôi.

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

Hy vọng nó sẽ giúp được ai đó :)

Không có giải pháp sẵn có cho vấn đề này, đây là một vấn đề với thiết kế và mẫu mã của bạn.

Bạn có thể sử dụng mẫu nhà xuất bản / thuê bao. Đối với điều này, bạn có thể sử dụng các sự kiện tùy chỉnh jQuery hoặc cơ chế sự kiện của riêng bạn.

Đầu tiên,

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

Bây giờ bạn có thể đăng ký các sự kiện divhtmlchanging / divhtmlchanged như sau,

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

Bây giờ, bạn phải thay đổi nội dung div thay đổi thông qua changeHtml()chức năng này . Vì vậy, bạn có thể theo dõi hoặc có thể thực hiện các thay đổi cần thiết cho phù hợp vì liên kết đối số dữ liệu gọi lại có chứa thông tin.

Bạn phải thay đổi html của div như thế này;

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

Ngoài ra, bạn có thể sử dụng điều này cho bất kỳ (các) phần tử html nào ngoại trừ phần tử đầu vào. Dù sao, bạn có thể sửa đổi điều này để sử dụng với bất kỳ yếu tố nào.

Sử dụng M mutObserver như đã thấy trong đoạn trích này do Mozilla cung cấp và được điều chỉnh từ bài đăng trên blog này

Ngoài ra, bạn có thể sử dụng ví dụ JQuery được thấy trong liên kết này

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

Bạn có thể lưu trữ InternalHTML cũ của div trong một biến. Đặt một khoảng để kiểm tra xem nội dung cũ có khớp với nội dung hiện tại không. Khi điều này không đúng, hãy làm gì đó.

Hãy dùng thử M mutObserver:

• https://developer.microsoft.com
• https://developer.mozilla.org/en-US/docs/Web/API/MutingObserver

hỗ trợ trình duyệt: http://caniuse.com/#feat=mutingobserver

<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>

Thêm một số nội dung vào div, cho dù thông qua jQuery hoặc qua de DOM-API, mặc định cho .appendChild()hàm. Những gì bạn có thể làm là ghi đè .appendChild()chức năng của đối tượng hiện tại và thực hiện một trình quan sát trong đó. Bây giờ đã ghi đè .appendChild()chức năng của chúng tôi , chúng tôi cần mượn chức năng đó từ một đối tượng khác để có thể nối thêm nội dung. Do đó, chúng tôi gọi .appendChild()một div khác để cuối cùng nối thêm nội dung. Tất nhiên, điều này cũng được tính cho .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);
        }
    };

Ở đây bạn có thể tìm thấy một ví dụ naïf. Bạn có thể mở rộng nó một mình tôi đoán. http://jsfiddle.net/RKLmA/31/

Nhân tiện: điều này cho thấy JavaScript tuân thủ nguyên tắc OpenCloses. :)