Html element content change event

Question

I need to know the content change event of my div element, how can I do this using jquery?

<div id="mydiv">text before</div> 

over time

 <div id="mydiv>other content</div> 

I make this way

 $("#mydiv").change(function() { alert('yes'); }); 

does not work

  (function(){ var interval; jQuery.event.special.contentchange = { setup: function(data, namespaces) { var $this = $(this); var $originalContent = $this.text(); interval = setInterval(function(){ if($originalContent != $this.text()) { console.log('content changed'); $originalContent = $this.text(); jQuery.event.special.contentchange.handler(); } },500); }, teardown: function(namespaces){ clearInterval(interval); }, handler: function(namespaces) { jQuery.event.handle.apply(this, arguments) } }; })(); $("#mydiv").bind("contentchange", function() { alert('yes'); ///no alert! why? }); 

but I see the logs in the console!

Answer 1

You can trigger a custom event after changing the contents of an element:

 var $mydiv = $("#mydiv"); // set up the custom event handler $mydiv.bind("contentchange", function() { alert("changed"); }); // change the content and trigger a custom event $mydiv.html("other content").trigger("contentchange"); // and again $mydiv.html("yet other content").trigger("contentchange"); 

Answer 2

 "The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. " 

You cannot use change event in divs.