div值改变时执行javascript函数答案

【问题标题】：Execute javascript function when div value changesdiv值改变时执行javascript函数
【发布时间】：2013-12-22 04:07:17
【问题描述】：

我有一个 div <div id="Country">India</div> 。每当 div 值发生变化时，我都想执行一些代码（比如 JavaScript 函数）。如何收听 div 值的变化？我需要为此使用 Jquery 吗？

【问题讨论】：

您需要 javascript 来执行此操作（如果您愿意，可以使用 jQuery）。
div 值变化是指innerHTML。
当前“最好的”处理这个问题的方法可能是挖掘任何改变 div 内容的地方并听那个来源。
无论如何，也许是一个骗局。 stackoverflow.com/questions/2457043/… 或 stackoverflow.com/questions/648996/… 或 stackoverflow.com/questions/12421491/…

标签： javascript jquery html

【解决方案1】：

您可以监听由 MutationObserver DOM API 触发的事件： https://developer.mozilla.org/en/docs/Web/API/MutationObserver

【讨论】：

【解决方案2】：

试试这个Demo，它在Cracker0dks的链接http://jsbin.com/ayiku，这是代码http://jsbin.com/ayiku/1/edit

【讨论】：

【解决方案3】：

一个简单的 jquery 解决方案是使用自定义事件并在您更改 DOM 时自行触发：

$("#country").html('Germany').trigger('CountryChanged');


$('#country').on('CountryChanged', function(event, data) {
   //contentchanged
});

【讨论】：

+1 因为我会尝试挂钩源，而不是对 DOM 更改做出反应。 DOM 观察者（新旧风格）的支持不够好，尽管有各种 [jQuery] 插件可以尝试使支持可用/一致..

【解决方案4】：

我为你准备了一个小演示。它有点粗糙，但我相信你可以改进它；）。

快乐编码:)

<!DOCTYPE html>
<html>

    <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>


    $(document).ready(function(){

    $("#ChangeText").click(function(){
        var value = $("#DivText").val();
        $("#Country").text(value);
    });

    $('#Country').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
    });
});
    </script>
    </head>

    <body >
    <input type="text" id="DivText" />
    <button id="ChangeText"> Change Div Text </button> <br /> <br />
        <div id="Country">India</div>   

    </body>
</html>

【讨论】：

【解决方案5】：

在脚本标签中试试这个：

$(document).ready(function(){

var new_country1 = "";
var new_country2 = "";
var func_flag = 0;
    $('#Country').bind('DOMNodeInserted DOMNodeRemoved', function(event) {      

    if (event.type == 'DOMNodeInserted') {
        new_country1 = this.innerHTML;  
        if(new_country1 != new_country2 && func_flag == 1) {
            country_changed_function();
        }                   
    } else {
        new_country2 = this.innerHTML;
    }

    func_flag = 1;  

    });
});

function country_changed_function(){
    alert('country changed.');
}

这里的“country_changed_function”是country div innerHTML 上的函数触发器已更改。

【讨论】：