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?
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?
- You need javascript to do that (jQuery if you want). – kmas Commented Dec 5, 2013 at 9:34
- div value changes refers innerHTML. – Kawinesh S K Commented Dec 5, 2013 at 9: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 Commented Dec 5, 2013 at 9:40
- Anyway, perhaps a dup. of stackoverflow./questions/2457043/… or stackoverflow./questions/648996/… or stackoverflow./questions/12421491/… – user2864740 Commented Dec 5, 2013 at 9:44
- [Deprecation] Listener added for a 'DOMNodeRemoved' mutation event. Support for this event type has been removed, and this event will no longer be fired. See chromestatus./feature/5083947249172480 for more information. – Mehdi Benkirane Commented Dec 5, 2024 at 16:08
5 Answers
Reset to default 4an 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
});
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./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>
You can listen to events triggered by the MutationObserver DOM API : https://developer.mozilla/en/docs/Web/API/MutationObserver
Try this Demo, It's in Cracker0dks's link http://jsbin./ayiku and this is the code http://jsbin./ayiku/1/edit
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.