3

I have a div <div id="Country">India</div> . I want to execute some code (say JavaScript function) whenever the div value changes. How can I listen to changes on the div value? Do i need to use Jquery for this?

Stunner
  • 961
  • 2
  • 19
  • 39
  • You need javascript to do that (jQuery if you want). – kmas Dec 05 '13 at 09:34
  • div value changes refers innerHTML. – Kawinesh S K Dec 05 '13 at 09:34
  • The "best" current way to handle this would probably be to *tap into whatever changes the div contents* and listen to that source. – user2864740 Dec 05 '13 at 09:40
  • Anyway, perhaps a dup. of http://stackoverflow.com/questions/2457043/most-efficient-method-of-detecting-monitoring-dom-changes or http://stackoverflow.com/questions/648996/how-do-i-monitor-the-dom-for-changes or http://stackoverflow.com/questions/12421491/can-i-monitor-changes-on-an-html-div – user2864740 Dec 05 '13 at 09:44

5 Answers5

4

an easy jquery solution is to use a custom event and trigger it yourself when you change the DOM:

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


$('#country').on('CountryChanged', function(event, data) {
   //contentchanged
});
Amine Hajyoussef
  • 4,381
  • 3
  • 22
  • 26
  • +1 As I would try to hook into the source, as opposed to reacting to the DOM changes. The DOM observers (old and new style) are not well-enough supported, although there are various [jQuery] plugins to try and make the support usable/consistent .. – user2864740 Dec 05 '13 at 09:47
2

I have prepared a small demo for you. Its a little crude but I am sure You can improve it ;).

Happy Coding :)

<!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>
Talha Masood
  • 993
  • 1
  • 7
  • 22
0

You can listen to events triggered by the MutationObserver DOM API : https://developer.mozilla.org/en/docs/Web/API/MutationObserver

Delapouite
  • 9,469
  • 5
  • 36
  • 41
0

Try this Demo, It's in Cracker0dks's link http://jsbin.com/ayiku and this is the code http://jsbin.com/ayiku/1/edit

Kadiri
  • 288
  • 3
  • 9
0

Try this within script tag: 

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

Here "country_changed_function" is function trigger on country div innerHTML got changed.

NavaStha
  • 96
  • 6