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– kmas2013-12-05 09:34:31 +00:00Commented Dec 5, 2013 at 9:34
-
div value changes refers innerHTML.Kawinesh S K– Kawinesh S K2013-12-05 09:34:44 +00:00Commented 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– user28647402013-12-05 09:40:53 +00:00Commented Dec 5, 2013 at 9:40
-
Anyway, perhaps a dup. of stackoverflow.com/questions/2457043/… or stackoverflow.com/questions/648996/… or stackoverflow.com/questions/12421491/…user2864740– user28647402013-12-05 09:44:16 +00:00Commented 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.com/feature/5083947249172480 for more information.Mehdi Benkirane– Mehdi Benkirane2024-12-05 16:08:52 +00:00Commented Dec 5, 2024 at 16:08
Add a comment
|
5 Answers
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
});
1 Comment
user2864740
+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 ..
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>
Comments
You can listen to events triggered by the MutationObserver DOM API : https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Comments
Try this Demo, It's in Cracker0dks's link http://jsbin.com/ayiku and this is the code http://jsbin.com/ayiku/1/edit
Comments
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.
