title: jQuery blur event not firing
body: <p>I'm new to jQuery, so I bet I'm doing something wrong, but I cannot figure out why this event is not firing.  I have a textarea element that needs to have any breaking spaces removed prior to submission due to the application that is accepting the data.  I am attempting to do this clean up in the textarea when it loses focus, hence the blur method.  Unfortunately it does not appear to fire within my form.  The weird part is the same code works in jsFiddle, but only upon the initial loss of focus.  All subsequent changes to the textarea and loss of focus does not fire the event.  I also read in another answer that the <code>delegate()</code> or <code>.on()</code> methods might need to be used, but I'm not 100% sure how to do this properly.(<a href="https://stackoverflow.com/questions/8290180/jquery-blur-not-working">jQuery blur() not working?</a>)  Code is below, any advice would be helpful.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $("#comments").blur(function() {
      var txt = $("#comments").html();
      txt = txt.replace(/\n/g, ' ');
      txt = txt.replace(/\s{3,}/g, ' ');
      $("#comments").html($.trim(txt));
  });
  
  //$("#comments").trigger("blur"); added this to help fix the issue, but it didn't make a difference
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:<br>
  <code>&lt;textarea name="comments" id="comments" style="width: 100%; height:200px"&gt;&lt;/textarea&gt;</code></p>
  
  <p>And here is the jsFiddle link:  <a href="http://jsfiddle.net/75JF6/17/" rel="nofollow noreferrer">http://jsfiddle.net/75JF6/17/</a></p>
  
  <p>EDIT:  Thanks for all the fast responses.  I have looked into everyone's answers and taken your advice. I'm 95% of the way there, however, there is still an issue that persists.  Switching to the <code>.val()</code> method instead of <code>.html()</code> is a better way of doing this, but according to the jQuery API the following issue exists when calling this method on <code>textarea</code>s where carriage returns are parsed out.  The issue is that I need to make sure they are removed to validate the field.</p>
  
  <blockquote>
    <p>Note: At present, using <code>.val()</code> on textarea elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:</p>
  </blockquote>
  
  <pre><code>$.valHooks.textarea = {
    get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
    }
  };
  </code></pre>
  
  <p>As I mentioned earlier I'm new to jQuery and could not find much information regarding how to properly use valHooks between google &amp; stack overflow.  If anyone can shed some light on this in relation to my original question it would be greatly appreciated.</p>