jQuery手表div

前端之家收集整理的这篇文章主要介绍了jQuery手表div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有什么办法观看,如果一个div内的内容改变?

假设我有:

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

其中在某点5秒后更改为:

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

如何通过回调或其他方式通知这一点?我可以在大多数情况下得到的javascript,这是插入,告诉我。但我想知道是否可能。

解决方法

jQuery .change()方法仅适用于表单字段。

我为你写了一个小jQuery插件

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

请注意,此监视仅更改元素(html)的内容,而不是属性

原文链接:https://www.f2er.com/jquery/184190.html

猜你在找的jQuery相关文章