jquery 如何检测HTML元素内容的更改？

dxpyg8gm 于 2022-12-03 发布在 jQuery

关注(0)|答案(3)|浏览(177)

我正在使用Ruby on Rails3.1.0和jquery-rails gem。我希望绑定一个jQuery事件（也许我可以使用live功能...）添加到HTML div标记，以便检查其内容更改，如果是这样（即，如果向该div标记添加了新代码），则在另一个HTML div标记中创建自定义文本。
也就是说，在我的视图文件中我有：

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

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

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

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

我想让它工作，以便在id="div_content_2"的div中有如下输出：

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

"我该怎么做"
附言：我正在实现一个表单，选择某个选项后（此事件旨在使用id="div_content_1"在div中生成HTML input字段-我这样做是出于自定义目的...）可以在同一页面上对这些选项进行排序（使用div和id="div_content_2"旨在使我计划的排序过程成为可能）。

jquery

来源：https://stackoverflow.com/questions/7690817/how-to-detect-a-change-in-the-contents-of-a-html-element

3条答案

按热度按时间

ccgok5k51#

怎么样：

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

工作示例：JSFiddle
这个方法比其他两个方法好，因为它不使用轮询。相反，它使用了观察者模式，这要好得多。但是，缺点是它在Internet Explorer 9以下的版本中不起作用。

赞(0）回复(0）举报 2022-12-03

mspsb9vt2#

不如这样吧：

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

赞(0）回复(0）举报 2022-12-03

unhi4e5o3#

这可能是一个“duh”类型的答案，但老实说，我认为最好的办法是简单地修改“change the DIV”函数，使其调用另一个函数：

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

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

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 如何检测HTML元素内容的更改？

3条答案

相关问题

热门标签

最新问答