Как обнаружить изменение содержимого HTML-элемента?

Question

Я использую Ruby on Rails 3.1.0 и камень jquery-rails.Я хотел бы связать событие jQuery (возможно, я мог бы использовать функциональность live ...) с тегом HTML div, чтобы я мог проверять изменения его содержимого и, если да, то есть, если добавлен новый кодк тегу div), чтобы создать собственный текст в другом теге HTML div.

То есть в моем файле просмотра у меня есть:

<div id="div_content_1"></div>

<div id="div_content_2"></div>

Я бы хотелдобавить \ удалить "Привет!"текстовое сообщение внутри div с id="div_content_2" каждый раз, когда div содержимое с id="div_content_1" изменяется (в моем случае, когда к этому тегу div добавляется поле HTML input - читатьпример, который следует)Например (в случае «добавления»), когда div с id="div_content_1" изменяется следующим образом

<div id="div_content_1">
  <!-- The following 'input' tag was just added -->
  <input ... />
</div>

, я хотел бы заставить его работать так, чтобы иметь вывод, подобный следующему вdiv с id="div_content_2":

<div id="div_content_2">
  <p>
    Hello!
  </p>
</div>

Как я могу это сделать?

PS : я реализую форму, для которойпользователь, после выбора какой-либо опции (это событие предназначено для генерации полей HTML input в div с id="div_content_1" - я делаю это для своих пользовательских целей ...), может заказать эту опцию на той же странице (div с id="div_content_2" предназначен для того, чтобы сделать возможным процесс сортировки, который я планировал).

Answer 1

Как насчет:

$('#div_content_1').bind('DOMSubtreeModified', function() {
    $('#div_content_2').html('<p>Hello</p>');
});

Рабочий пример: JSFiddle

Этот метод лучше двух других, поскольку он не использует опрос.Вместо этого он использует шаблон Observer, который намного лучше.Однако недостатком является то, что это не будет работать в версиях Internet Explorer ниже 9.

Answer 2

Как насчет этого:

($.fn.watchChanges = function(cb){
    $(this).each(function(i, e){
        $(e).data("original_content", $(e).html());
        window.content_changes = window.content_changes ? window.content_changes : [];
        window.content_changes.push({"element": e, "callback": cb});
    });
    return $(this);
})(jQuery);

setInterval(function(){
    if(window.content_changes)
    {
        $.each(window.content_changes, function(i, e) {
            if($(e.element).data("original_content") != $(e.element).html())
            {
                e.callback.apply($(e.element));
                $(e.element).data("original_content", $(e.element).html())
            }
        });
    }
}, 500);

Использование:

$('.foo').watchChanges(function(){
    $('.bar').html("something's different about you, foo!");
});

Answer 3

Это может быть ответ "дух", но, честно говоря, я думаю, что вам лучше всего просто изменить вашу функцию "изменить DIV", чтобы она вызывала другую функцию:

function addInputToDiv(newInput) {
    div1.append(newInput);
    takeSomeActionToDiv2InResponse();
}

Это не так круто, как использование сумасшедших событий, таких как DOMSubtreeModified ... но оно будет работать во всех браузерах.