title: Create a jQuery special event for content changed
body: <p>I'm trying to create a jQuery special event that triggers when the content that is bound, changes. My method is checking the content with a <code>setInterval</code> and check if the content has changed from last time. If you have any better method of doing that, let me know. Another problem is that I can't seem to clear the interval. Anyway, what I need is the best way to check for content changes with the <code>event.special</code>.</p>
  <pre><code>(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)
          }
      };
      
  })();
  </code></pre>
  <p>And bind it like this:</p>
  <pre><code>$('#container').bind('contentchange', function() {
          console.log('contentchange triggered');
  });
  </code></pre>
  <p>I get the <code>console.log</code> 'content changed', but not the <code>console.log</code> 'contentchange triggered'. So it's obvious that the callback is never triggered.</p>
  <p>I just use Firebug to change the content and to trigger the event, to test it out.</p>
  <p><b>Update</b><br />
  I don't think I made this clear enough, my code doesn't actually work. I'm looking for what I'm doing wrong.</p>
  <br />
  <p><b>Here is the finished code for anyone interested</b></p>
  <pre><code>(function(){
      
      var interval;
          
      jQuery.event.special.contentchange = {
          setup: function(){
              var self = this,
              $this = $(this),
              $originalContent = $this.text();
              interval = setInterval(function(){
                  if($originalContent != $this.text()) {
                      $originalContent = $this.text();
                      jQuery.event.handle.call(self, {type:'contentchange'});
                  }
              },100);
          },
          teardown: function(){
              clearInterval(interval);
          }
      };
          
  })();
  </code></pre>
  <p>Thanks to Mushex for helping me out.</p>