Phát hiện các thay đổi nội dung phần tử với jQuery

change() chức năng hoạt động và phát hiện các thay đổi trên các phần tử biểu mẫu, nhưng có cách nào để phát hiện khi nào nội dung của phần tử DOM đã bị thay đổi không?

Điều này không hoạt động, trừ khi #contentlà một phần tử biểu mẫu

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

Tôi muốn điều này kích hoạt khi thực hiện một số việc như:

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

Ngoài ra html()hoặc append()chức năng không có một cuộc gọi lại.

Bất kỳ đề xuất?

Đây là những sự kiện đột biến .

Tôi chưa sử dụng các API sự kiện đột biến trong jQuery, nhưng một tìm kiếm lướt qua đã dẫn tôi đến dự án này trên GitHub. Tôi không biết về sự trưởng thành của dự án.

Tôi biết bài đăng này đã được một năm tuổi, nhưng tôi muốn cung cấp một cách tiếp cận giải pháp khác cho những người gặp vấn đề tương tự:

1. Sự kiện thay đổi jQuery chỉ được sử dụng trên các trường nhập của người dùng vì nếu bất kỳ thứ gì khác được thao tác (ví dụ: div), thì thao tác đó đến từ mã. Vì vậy, hãy tìm nơi thao tác xảy ra và sau đó thêm bất cứ thứ gì bạn cần vào đó.

2. Nhưng nếu điều đó không thể thực hiện được vì bất kỳ lý do gì (bạn đang sử dụng một plugin phức tạp hoặc không thể tìm thấy bất kỳ khả năng "gọi lại" nào) thì cách tiếp cận jQuery mà tôi đề xuất là:

   a. Để thao tác DOM đơn giản, hãy sử dụng chuỗi và duyệt jQuery,$("#content").html('something').end().find(whatever)....

   b. Nếu bạn muốn làm điều gì đó khác, hãy sử dụng jQuery bindvới sự kiện tùy chỉnh vàtriggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });

Đây là liên kết đến trình xử lý trình kích hoạt jQuery: http://api.jquery.com/triggerHandler/

Trình duyệt sẽ không kích hoạt sự kiện onchange cho <div> các phần tử.

Tôi nghĩ lý do đằng sau điều này là những yếu tố này sẽ không thay đổi trừ khi được sửa đổi bởi javascript. Nếu bạn đã phải tự mình sửa đổi phần tử (chứ không phải người dùng làm việc đó), thì bạn có thể chỉ cần gọi mã đi kèm thích hợp cùng lúc để sửa đổi phần tử, như sau:

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

Bạn cũng có thể kích hoạt một sự kiện như sau theo cách thủ công:

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

Nếu cả hai giải pháp này đều không phù hợp với tình huống của bạn, bạn có thể vui lòng cung cấp thêm thông tin về những gì bạn đang cố gắng hoàn thành một cách cụ thể không?

còn http://jsbin.com/esepal/2

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

Sự kiện này đã không được dùng nữa để thay thế cho API trình quan sát đột biến

Cố gắng liên kết với DOMSubtreeModified sự kiện tìm kiếm vì thử nghiệm cũng chỉ là một phần của DOM.

xem bài đăng này ở đây trên SO:

how-do-i-monitor-the-dom-for-thay đổi

Hãy thử cái này, nó được tạo ra bởi James Padolsey (JP ở đây trên SO) và làm chính xác những gì bạn muốn (tôi nghĩ)

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

Và với HTML5, chúng tôi có các Trình quan sát đột biến DOM gốc .

Nó không hoàn toàn là một câu trả lời jQuery - nhưng hữu ích khi đề cập đến để gỡ lỗi.

Trong Firebug, bạn có thể nhấp chuột phải vào một phần tử trong cây DOM và thiết lập 'Break on Attribute Change':

Khi một thuộc tính được thay đổi trong tập lệnh, cửa sổ gỡ lỗi sẽ xuất hiện và bạn có thể theo dõi những gì nó đang diễn ra. Ngoài ra còn có một tùy chọn để chèn phần tử và loại bỏ phần tử bên dưới (bị che khuất một cách vô ích bởi cửa sổ bật lên trong màn hình).

Tôi đang phát triển thư viện JS nhỏ có tên là mutabor ( https://github.com/eskat0n/mutabor ) nhằm đơn giản hóa việc sử dụng Sự kiện đột biến DOM. Xem demo.html để biết các ví dụ.

Hãy thử plugin livequery. Điều đó dường như hiệu quả với một thứ tương tự như tôi đang làm.

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

Thường thì một cách đơn giản và hiệu quả để đạt được điều này là theo dõi thời gian và vị trí bạn đang sửa đổi DOM.

Bạn có thể làm điều này bằng cách tạo một chức năng trung tâm luôn chịu trách nhiệm sửa đổi DOM. Sau đó, bạn thực hiện bất kỳ thao tác dọn dẹp nào bạn cần đối với phần tử đã sửa đổi từ bên trong hàm này.

Trong một ứng dụng gần đây, tôi không cần hành động ngay lập tức vì vậy tôi đã sử dụng lệnh gọi lại cho hàm tải thủ công (), để thêm một lớp vào bất kỳ phần tử đã sửa đổi nào và sau đó cập nhật tất cả các phần tử đã sửa đổi vài giây một lần bằng bộ đếm thời gian setInterval.

$($location).load("my URL", "", $location.addClass("dommodified"));

Sau đó, bạn có thể xử lý nó theo cách bạn muốn - ví dụ:

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

Bạn có thể thêm tùy chọn gọi lại vào hàm html (hoặc bất kỳ):

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

Demo tại đây.

Bạn thực hiện thay đổi trên một số phần tử, không phải phần tử bị buộc phải thay đổi bởi một thứ gì đó mà bạn phải nắm bắt.

Tôi đã viết một đoạn mã sẽ kiểm tra sự thay đổi của một phần tử trong một sự kiện.

Vì vậy, nếu bạn đang sử dụng mã javascript của bên thứ ba hoặc thứ gì đó và bạn cần biết khi nào thứ gì đó xuất hiện hoặc thay đổi khi bạn nhấp vào thì bạn có thể.

Đối với đoạn mã dưới đây, giả sử bạn cần biết khi nào nội dung bảng thay đổi sau khi bạn nhấp vào một nút.

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

Mã giả:

• Khi bạn nhấp vào một nút
• html của phần tử bạn muốn thay đổi đã được nắm bắt
• sau đó chúng tôi liên tục kiểm tra html của phần tử
• khi chúng tôi nhận thấy html khác biệt, chúng tôi ngừng kiểm tra

Chúng ta có thể đạt được điều này bằng cách sử dụng Sự kiện đột biến . Theo www.w3.org, Mô-đun sự kiện đột biến được thiết kế để cho phép thông báo về bất kỳ thay đổi nào đối với cấu trúc của tài liệu, bao gồm cả sửa đổi đính kèm và văn bản. Để biết thêm chi tiết SỰ KIỆN MUTATION

Ví dụ :

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

Không thể, tôi tin rằng có một sự kiện thay đổi nội dung nhưng nó chắc chắn không phải là x-browser

Tôi có nên nói rằng không thể thực hiện được nếu không có một số khoảng thời gian khó chịu trong nền!