jQuery blur event not firing
Solution 1
A combination of answers from @Sushanth -- and @Eez along with some additional research brought me to the correct answer to this question. Thank you for your input, which put me on the right path. I'm going to set this answer as community wiki.
Both changing the retrieval method from .html()
to .val()
as well as using the .on()
function solved the issue I was experiencing. Since the form field "#comments"
was a textarea
it experienced a known issue within the jQuery API: http://api.jquery.com/val/
Below is the code that actually 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-- 's jsFiddle again to include all of this information if anyone is interested: http://jsfiddle.net/B3y4T/
Solution 2
You code is working perfectly fine.
Also attach the click event on the submit button, as there is no blur event happening when you click the button. you have to explicitly make the textarea lose focus.
$(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));
}
});
Solution 3
It's not required to add delegate() or on() to the element, it's only required if they are dynamically added, deleted, etc. but it won't hurt to try.
For your example, replace: $("#comments").blur(function() {
With:
$(document).on("blur","#comments",function() {
Also, can you check thru developer tools of chrome/firefox/safari/etc if it's giving errors in the console?
Solution 4
You were close. The on() event in jQuery is probably one of the most resource tools you have available to you, but there are few different ways to mark it up.
$("#comments").on({
'blur' : function() {
// your magic here
}
});
$("#comments").trigger("blur");
I forked your jsFiddle to get what you had working. http://jsfiddle.net/75JF6/33/ You were close and were on the right track. Think of the on() event as adding callback functionality to any event out there. I hope that helps!
Solution 5
Right 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.
JNYRanger
Just a guy who works in the Software & IT world and enjoys programming in both a professional and hobbyist setting.
Updated on July 09, 2022Comments
-
JNYRanger almost 2 years
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
delegate()
or.on()
methods might need to be used, but I'm not 100% sure how to do this properly.(jQuery blur() not working?) Code is 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 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
.val()
method instead of.html()
is a better way of doing this, but according to the jQuery API the following issue exists when calling this method ontextarea
s where carriage returns are parsed out. The issue is that I need to make sure they are removed to validate the field.Note: At present, using
.val()
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:$.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 regarding how to properly use valHooks between google & stack overflow. If anyone can shed some light on this in relation to my original question it would be greatly appreciated.
-
Kenny Thompson over 10 yearsHmm... Both his code and the code provided is not working in IE10. Go figure.
-
Sushanth -- over 10 years@KennyThompson .. I believe it is because of
prevent**d**efault
.. d should be uppercase. thanks for pointing it out -
JNYRanger over 10 yearsA combination of your answer and the suggestion to switch to
.val()
instead of.html()
did the trick when mixed in with thevalHook
function since I'm using textareas -
KishoreInWindows over 7 yearskudos to you,it's working for me after replacing the $(element).on('blur') event handler inside the document ready function with $(document).on("blur",element) function even though i cant find any difference between them
-
mwebber over 7 years@KishoreInWindows with this way you tell the parent (document,body,head etc) to listen for child events with given selector instead of binding them directly on selector(which may not exist and then event is not running).
-
KishoreInWindows over 7 years@mwebber if the element is dynamic you can go with the above process otherwise u can bind directly