title: How to detect content change event on a div
body: <p>I am trying to make an editor everything working fine till now, but now I need to make a handler which could detect any change made in a div or any content edited in the div</p>
  
  <pre><code>&lt;?php $row="testing content" ?&gt;
  &lt;!-- my editor section--&gt;
  &lt;div id="editor"&gt;
      &lt;div id="options"&gt;
          &lt;span&gt;&lt;a id="iimg"&gt;Insert Image from gallery&lt;/a&gt;&lt;/span&gt;
          &lt;span&gt;Upload image to gallery&lt;/span&gt;
          &lt;span&gt;&lt;a id="iheading"&gt;Heading&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="product_descriptioncontent" contenteditable="true"&gt;&lt;?php echo $row; ?&gt;
      &lt;/div&gt;&lt;!-- viewable editor --&gt;
      &lt;input type="hidden" name="textareacontent" value="" id="textareacontent" &gt;
      &lt;!-- hidden field to submit values --&gt;
  &lt;/div&gt;
  &lt;!-- end of editor section --&gt;
  &lt;div id="imc"&gt;&lt;/div&gt; &lt;!-- image gallery loading section --&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
  
      $('#iheading').click(function(){
      $('#product_descriptioncontent').append('&lt;h1&gt;Heading&lt;/h1&gt;');
      });
  
      $('#iimg').click(function(){
          $('#imc').load('imagegallery.php',function(){
          $('#gallery img').on('click',function(){
              $('#product_descriptioncontent').append('&lt;img  src="http://localhost/sites/site_pics/otherpic/1.png"&gt;&lt;br&gt;&amp;nbsp;');
      });
      });
      });
      $('#product_descriptioncontent').change(function(){
      alert("pppp");// how to capture this event
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have placed a bit of my code at jsfiddle <a href="http://jsfiddle.net/bipin000/UJvxM/1/" rel="noreferrer">http://jsfiddle.net/bipin000/UJvxM/1/</a>
  thanks for your precious time</p>