如何检测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"eachtime的div 含量与id="div_content_1"(当HTML在我的情况下,改变input字段被添加到div-阅读下面的例子中标记).例如(在"添加"的情况下),当divwith 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"-我做的是我定制的目的...)可以命令在同一页上的选项(divwith id="div_content_2"旨在使我计划的排序过程成为可能.

Answer 1

怎么样:

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

工作示例:JSFiddle

此方法优于其他两种方法,因为它不使用轮询.相反,它使用观察者模式,这是更好的.但是,缺点是这不适用于低于9的Internet Explorer版本.

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!");
});