Đồng hồ jQuery cho các thay đổi về sự thay đổi?

Question

Tôi có một cuộc gọi lại ajax để chèn đánh dấu html vào div chân trang.

Điều tôi không thể hiểu là cách tạo cách theo dõi div khi nội dung thay đổi. Đặt logic bố trí Tôi đang cố gắng tạo ra trong gọi lại không phải là một tùy chọn như mỗi phương pháp (gọi lại và xử lý div bố trí của tôi) không nên biết về khác.

Lý tưởng nhất là tôi muốn xem một số loại xử lý sự kiện tương tự như $('#myDiv').ContentsChanged(function() {...}) hoặc $('#myDiv').TriggerWhenContentExists(function() {...})

Tôi tìm thấy một plugin gọi là đồng hồ và một phiên bản cải tiến của plugin nhưng không bao giờ có thể nhận được một trong hai để kích hoạt. Tôi đã thử "xem" tất cả mọi thứ tôi có thể nghĩ đến (tức là chiều cao tài sản của div được thay đổi thông qua tiêm ajax) nhưng không thể làm cho họ làm bất cứ điều gì cả.

Bất kỳ suy nghĩ/trợ giúp nào? Cảm ơn jas

Answer 1

Cách hiệu quả nhất mà tôi đã được tìm thấy là liên kết với sự kiện DOMSubtreeModified. Nó hoạt động tốt với cả jQuery $.html() và thông qua thuộc tính innerHTML của JavaScript chuẩn.

$('#content').bind('DOMSubtreeModified', function(e) { 
    if (e.target.innerHTML.length > 0) { 
    // Content change handler 
    } 
}); 

http://jsfiddle.net/hnCxK/

Khi gọi từ jQuery $.html(), tôi thấy sự kiện cháy hai lần: một lần để xóa nội dung hiện có và một lần để thiết lập nó. Một kiểm tra nhanh .length sẽ hoạt động trong các triển khai đơn giản.

Điều quan trọng cần lưu ý là sự kiện luôn là cháy khi được đặt thành chuỗi HTML (ví dụ: '<p>Hello, world</p>'). Và sự kiện đó chỉ xảy ra khi kích hoạt khi thay đổi đối với các chuỗi thuần văn bản.

Answer 2

Bạn có thể muốn xem xét sự kiện DOMNodeInserted cho Firefox/Opera/Safari và sự kiện onpropertychange cho IE. Nó có thể sẽ không quá khó để sử dụng những sự kiện này nhưng nó có thể là một chút hack-ish. Dưới đây là một số tài liệu sự kiện javascript: http://help.dottoro.com/larrqqck.php

Answer 3

Bạn có thể nghe để thay đổi các yếu tố DOM (div của bạn chẳng hạn) bằng cách gắn vào DOMCharacterDataModified thử nghiệm trong chrome nhưng không làm việc trong IE thấy một demo here
Nhấp vào nút gây ra một sự thay đổi trong div mà đang được theo dõi, mà lần lượt điền div khác để cho bạn thấy làm việc của nó ...

---

có nhiều hơn một chút của một cái nhìn Shiki 's câu trả lời cho jquery listen to changes within a div and act accordingly vẻ như nó nên làm những gì bạn muốn:

$('#idOfDiv').bind('contentchanged', function() { 
    // do something after the div content has changed 
    alert('woo'); 
}); 

Trong chức năng của bạn mà cập nhật div:

$('#idOfDiv').trigger('contentchanged'); 

Coi đây là working demo here

Answer 4

Có một thư viện javascript gọn gàng, đột biến-tóm tắt của google, cho phép bạn quan sát thay đổi chính xác một cách chính xác.Điều tuyệt vời về nó, là nếu bạn muốn, bạn chỉ có thể được thông báo về những hành động thực sự tạo ra sự khác biệt trong DOM, để hiểu ý tôi là bạn nên xem video rất thông tin trên trang chủ của dự án.

liên kết: http://code.google.com/p/mutation-summary/

jquery wrapper: https://github.com/joelpurra/jquery-mutation-summary