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"内的短信会发生变化（在我的情况下，当HTML input时字段被添加到该div标记 - 阅读后面的示例）。例如（在“添加”的情况下），当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 ：我正在为用户选择一些选项后实现一个表单（此事件旨在input中生成带有{div的HTML id="div_content_1"字段1}} - 我为了我的自定义目的而制作...）可以在同一页面上订购这些选项（带有div的{{1}}旨在使我计划的排序过程成为可能。 / p>

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

这可能是一种“呃”的答案，但老实说，我认为你最好的办法是简单地修改你的“改变DIV”功能，以便它调用另一个功能：

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

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

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

3 个答案: