如何检测 HTML 元素内容的变化？

Question

我正在使用 Ruby on Rails 3.1.0 和 jquery-rails gem。我想将 jQuery 事件（也许我可以使用 live 功能...）绑定到 HTML div 标记，以便我可以检查其内容更改，如果so（即，如果将新代码添加到该 div 标记中），在另一个 HTML div 标记中创建自定义文本。

也就是说，在我的视图文件中，我有：

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

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

我想添加\删除“Hello！” div 内带有 id="div_content_2" 的文本消息，每次 div content 带有 id=" div_content_1" 发生变化（在我的例子中，当 HTML input 字段添加到该 div 标记时 - 请阅读下面的示例）。例如（在“add”情况下），当带有 id="div_content_1" 的 div 像这样更改时，

<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：我我正在实现一个表单，用户在选择某个选项后（此事件旨在使用 id="div_content_1" 在 div 中生成 HTML input 字段 - 我出于自定义目的而这样做...）可以在同一页面上订购这些选项（带有 id="div_content_2" 的 div 旨在使我计划的排序过程成为可能）。

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

Answer 3

这可能是一个“duh”的答案，但老实说，我认为最好的选择是简单地修改“更改 DIV”函数，以便它调用另一个函数：

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

这不像使用 DOMSubtreeModified 这样的疯狂事件那么酷。 .但它适用于所有浏览器。