JQuery blur event doesn't fire

Question

I am new to jQuery, so I am sure that I am doing something wrong, but I can not understand why this event is not shooting. I have a textarea element that needs to be deleted before sending due to the application receiving the data. I am trying to do this clear in a text box when it loses focus, hence the blur method. Unfortunately, it does not work in my form. The strange part is the same code as in jsFiddle, but only with the initial loss of focus. All subsequent changes to textarea and loss of focus do not trigger the event. I also read in another answer that the delegate() or .on() methods might be needed, but I'm not 100% sure how to do this correctly. ( jQuery blur () not working? ) The code below, any advice would be helpful.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(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 }); </script> 

HTML:
<textarea name="comments" id="comments" style="width: 100%; height:200px"></textarea>

And here is the jsFiddle link: http://jsfiddle.net/75JF6/17/

EDIT: Thanks for all the quick answers. I looked through all the answers and accepted your advice. I'm 95% of what I have, but the problem still persists. Switching to the .val() method instead of .html() is the best way to do this, but according to the jQuery API, when calling this method on textarea , where the carriage return is performed, the following problem occurs. The problem is that I need to make sure they are deleted to validate the field.

Note. Currently, using .val() on textarea elements, they .val() carriage return characters from the value specified in the browser. When this value is sent to the server via XHR, however, the carriage return is saved (or added by browsers that do not include them in the original value). A workaround for this problem can be achieved with valHook as follows:

 $.valHooks.textarea = { get: function( elem ) { return elem.value.replace( /\r?\n/g, "\r\n" ); } }; 

As I mentioned earlier, I'm new to jQuery and could not find much information on how to use valHooks between google and stack overflows correctly. If anyone can shed light on this in relation to my original question, we will be very grateful.

Answer 1

The combination of answers from @Sushanth - and @Eez, along with some additional research, led me to the correct answer to this question. Thank you for your contribution, which put me on the right path. I am going to install this answer as a community wiki.

Both changing the search method from .html() to .val() , and using the .on() function resolved the problem I was facing. Since the "#comments" form field was textarea , it experienced a known issue in the jQuery API: http://api.jquery.com/val/

Below is the code that really resolved the issue:

 $(document).ready(function () { $.valHooks.textarea = { get: function (elem) { return elem.value.replace(/\r?\n/g, "<br>\n"); } }; $("#comments").on('blur', trimText); $("input[type='submit']").on('click', function (e) { e.preventDefault(); trimText(); $("form:first").submit(); }); function trimText() { var txt = $("#comments").val(); txt = txt.replace(/<br>\n/g, ' '); txt = txt.replace(/\s{3,}/g, ' '); //alert(txt); $("#comments").val($.trim(txt)); } }); 

I forked @ Sushanth-- jsFiddle again to include all this information if anyone is interested: http://jsfiddle.net/B3y4T/

Answer 2

Your code works fine.

Also attach the click event on the submit button, since there is no blur when the button is clicked. you must clearly lose focus on the text.

 $(document).ready(function () { $("#comments").on('blur', trimText); $("input[type='submit']").on('click', function (e) { e.preventDefault(); trimText(); $("input[type='submit']").submit(); }); function trimText() { var txt = $("#comments").html(); txt = txt.replace(/\n/g, ' '); txt = txt.replace(/\s{3,}/g, ' '); $("#comments").html($.trim(txt)); } }); 

Check feed

Answer 3

You do not need to add the delegate () or on () element to the element, this is only required if they are dynamically added, deleted, etc., but this does not hurt to try.

Replace as an example:
$("#comments").blur(function() {
WITH:
$(document).on("blur","#comments",function() {

Also, can you check through the developer tools chrome / firefox / safari / etc if it gives errors in the console?

Answer 4

You were close. The on () event in jQuery is probably one of the most accessible resources for you, but there are several different ways to mark it up.

 $("#comments").on({ 'blur' : function() { // your magic here } }); $("#comments").trigger("blur"); 

I forked your jsFiddle to get what you worked for. http://jsfiddle.net/75JF6/33/ You were close and on the right track. Think of the on () event as adding callback functions to any event. Hope this helps!

Answer 5

The correct way: http://jsfiddle.net/75JF6/35/

 $(document).ready(function() { $("textarea#comments").on('blur',function() { var txt = $(this).val(); txt.replace(/\n/g, ' '); txt = txt.replace(/\s{3,}/g, ' '); $(this).val($.trim(txt)); }); }); 

val () should be used for form input elements, textarea is no different.

Answer 6

It works with val() instead of html()

I think this is because the html value does not update the actual contents of the DOM tree

 $(document).ready(function() { $("#comments").blur(function() { var txt = $("#comments").val(); txt = txt.replace(/\n/g, ' '); txt = txt.replace(/\s{3,}/g, ' '); $("#comments").val($.trim(txt)); }); }); 

Answer 7

Use On, delegate, or live only when adding the target after the DOM is ready.

you can use keyup to do the same, except that it fires every time you press a key. The following code will fire when the user waits 300 ms after entering. it will be faster than the blur event.

 var ClearInterValHandel; var interval = 300 //in milisecond. $("#comments").keyup(function(){ ClearTimeOut(ClearInterValHandel); ClearInterValHandel = SetTimeout(trimText, interval); }); function trimText() { var txt = $("#comments").html(); txt = txt.replace(/\n/g, ' '); txt = txt.replace(/\s{3,}/g, ' '); $("#comments").html($.trim(txt)); }