JQuery watch 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, который делает вставку, чтобы сказать мне. Но я хотел знать, возможно ли это.

Ответ 1

Метод 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), а не атрибутов.

Ответ 2

Не существует встроенного события jQuery/DOM, которое будет срабатывать при изменении содержимого HTML/DOM.

Вы могли бы (если вы чувствуете себя очень расточительно) сделать что-то вроде этого:

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

Просто помните, вызывая .html() каждые 100 мс, вероятно, не самая лучшая идея для производительности ваших сайтов.

jsFiddle макет

Ответ 3

Возможно, разумно ли отслеживать источник событий, которые изменяют содержание вашего слоя? Скажем, пользователь нажал где-нибудь (прочитайте, "сделал щелчок" ) после того, как содержимое могло измениться. Поэтому, если вы проверите .html() после клика, а не используете цикл, это может сэкономить некоторые системные ресурсы.

Ответ 4

Кто/что изменит это? Если это какой-то JS, который вы контролируете, используйте это, чтобы также вызвать ваш обратный вызов. Очевидно, пользователь не может изменить это.

Если вы хотите посмотреть элемент <input> и т.д., используйте событие "change". Версия jQuery здесь: http://api.jquery.com/change/

Ответ 5

Вот пример кода, который вызывает простое предупреждение при изменении данного значения:

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

Ответ 6

Есть события, называемые DOMNodeInserted, DOMNodeRemoved и DOMSubtreeModified. В какой проверке добавляются или удаляются какие-либо элементы или изменяется внутренний HTML-код внутри div. для этого вам нужна функция 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);

Вышеуказанные функции будут проверять Div для любого изменения содержимого, для каждой секунды

Примечание. Эти события не поддерживаются IE