Đồng hồ jQuery div

Có cách nào để xem, nếu nội dung trong div thay đổi không?Đồng hồ jQuery div

Hãy nói rằng tôi có:

<div id="hello"><p>Some content here</p></div>

nào tại một số điểm 5 giây sau thay đổi:

<div id="hello"><ul><li>This is totally different!</li></ul></div>

Làm thế nào tôi có thể được thông báo về điều này thông qua một callback hay cái gì khác? Tôi có thể trong hầu hết các trường hợp nhận được javascript đó là làm chèn, để cho tôi biết. Nhưng tôi muốn biết nếu nó có thể.

Nguồn

2010-07-13 ash

Có một lý do mà các chức năng đó thay đổi nội dung div không thể cảnh báo bạn? – Josiah

Các jQuery .change() phương pháp duy nhất làm việc cho biểu mẫu form.

tôi đã viết một chút jQuery plugin cho bạn:

<!-- jQuery is required --> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 


<!-- this is the plugin --> 

<script> 
    jQuery.fn.contentChange = function(callback){ 
    var elms = jQuery(this); 
    elms.each(
     function(i){ 
     var elm = jQuery(this); 
     elm.data("lastContents", elm.html()); 
     window.watchContentChange = window.watchContentChange ? window.watchContentChange : []; 
     window.watchContentChange.push({"element": elm, "callback": callback}); 
     } 
    ) 
    return elms; 
    } 
    setInterval(function(){ 
    if(window.watchContentChange){ 
     for(i in window.watchContentChange){ 
     if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){ 
      window.watchContentChange[i].callback.apply(window.watchContentChange[i].element); 
      window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html()) 
     }; 
     } 
    } 
    },500); 
</script> 



<!-- some divs to test it with --> 

<p>Testing it: (click on divs to change contents)</p> 

<div id="a" onclick="$(this).append('i')">Hi</div> 
<div id="b" onclick="$(this).append('o')">Ho</div> 
<div class="c" onclick="$(this).append('y')">He</div> 
<div class="c" onclick="$(this).append('w')">He</div> 
<div class="c" onclick="$(this).append('a')">He</div> 




<!-- this is how to actually use it --> 

<script> 
    function showChange(){ 
    var element = $(this); 
    alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'"); 
    } 

    $('#a').contentChange(function(){ alert("Hi!") }); 
    $('div#b').contentChange(showChange); 
    $('.c').contentChange(function(){ alert("He he he...") }); 
</script>

Hãy nhận biết rằng đây xem những thay đổi trong nội dung của phần tử (html) mà thôi, không phải là thuộc tính.

Nguồn

2010-07-13 06:20:57

Cảm ơn. Rõ ràng cách duy nhất để làm điều đó là đặt hẹn giờ theo cách thủ công.Tôi có lẽ sẽ không bao giờ cần phải sử dụng các plugin, nhưng kudo để viết nó. – ash

Lưu ý rằng đồng hồ này chỉ thay đổi nội dung của phần tử (html), không phải các thuộc tính. –

Bạn có thể kiểm tra ở đây: http://jsfiddle.net/KpA2C/ –

Ai/điều gì sẽ thay đổi điều này? Nếu đó là một số JS bạn kiểm soát, sử dụng nó để kích hoạt gọi lại của bạn. Rõ ràng một người dùng không thể thay đổi điều này.

Nếu bạn muốn xem phần tử <input> v.v., hãy sử dụng sự kiện 'thay đổi'. jQuery phiên bản ở đây: http://api.jquery.com/change/

Nguồn

2010-07-13 03:33:03 psychotik

Dưới đây là một mẫu mã mà các cuộc gọi một cảnh báo đơn giản khi thay đổi giá trị nhất định:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>watchu, watchu, watchu want, watchu want?</title> 
</head> 
<body> 

    <div id='foo'>Hello World!</div> 

    <p><input type="button" id="ChangeButton" value="Change It" /></p> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

     $(function() { 

      $('#ChangeButton').click(function() { 
       $('#foo').html('Awfveeterzain!'); 
      }); 

      window.watchForChangeOriginalValue = $('#foo').html(); 
      watchForChange(); 
     }); 

     function watchForChange() { 
      if ($('#foo').html() != window.watchForChangeOriginalValue) 
       alert('the value changed!'); 
      else 
       window.setTimeout(watchForChange, 500); 
     } 

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

Nguồn

2010-07-13 05:09:02 a7drew

Không có sự kiện jQuery/DOM gốc nào sẽ kích hoạt khi thay đổi nội dung HTML/DOM.

Bạn có thể (nếu bạn đang cảm thấy đặc biệt là lãng phí) làm một cái gì đó như thế này:

$(function() { 
    var $div = $("#hello"); 
    var html = $div.html(); 
    var checking = setInterval(function() { 
    var newhtml = $div.html(); 
    if (html != newhtml) { 
     myCallback(); 
     html = newhtml; 
    } 
    },100); 

    function myCallback() { 
    alert('content changed!'); 
    // if you only want it to fire once, uncomment the following: 
    // clearInterval(checking); 
    } 
});

Chỉ cần nhớ, gọi .html() mỗi 100ms có lẽ không phải là ý tưởng tốt nhất cho hiệu suất trang web của bạn.

jsFiddle mockup

Nguồn

2010-07-13 06:37:17 gnarf

Thực ra, có. trong số này được gọi là [sự kiện đột biến] (https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events) là [chậm] (http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb? pli = 1), mặc dù. –

Có lẽ, đó là hợp lý để giám sát nguồn gốc của sự kiện mà sửa đổi các nội dung của lớp của bạn (s)? Giả sử, người dùng đã nhấp vào bất kỳ nơi nào (đọc ", đã nhấp chuột") sau nội dung có thể đã thay đổi. Vì vậy, nếu bạn kiểm tra .html() sau khi nhấp chuột thay vì sử dụng vòng lặp - nó có thể tiết kiệm một số tài nguyên hệ thống.

Nguồn

2011-10-23 17:35:32 Nixter

Có một số sự kiện được gọi là DOMNodeInserted, DOMNodeRemoved và DOMSubtreeModified. Mà kiểm tra là có bất kỳ yếu tố được thêm vào hoặc loại bỏ hoặc bất kỳ bên trong Html thay đổi bên trong một div. cho điều này, bạn cần một hàm setInterval().

function DivChange() {  
    $('#YourDiv').bind('DOMNodeInserted DOMNodeRemoved', function (event) { 
     if (event.type == 'DOMNodeInserted') { 
      alert('Content added'); 
     } else if (event.type == 'DOMNodeRemoved') { 
      alert('Content removed'); 
     } else { 
      alert('Inner Html changed for some content'); 
     } 
    }); 
} 
var DivTimer = setInterval(DivChange, 1000);

Các chức năng trên sẽ kiểm tra các Div đối với bất kỳ sự thay đổi nội dung, cho mỗi thứ hai

Lưu ý: Sự kiện này không được hỗ trợ bởi trình duyệt IE

Nguồn

2016-05-10 14:36:33 Prem

Đồng hồ jQuery div

Trả lời

Các vấn đề liên quan