jQuery .blur() not being affected - why?

Question

I googled this question and couldn't find an answer.

I am trying to have an alert appear when a user unfocuses off of any input on my form. I discovered the blur and focusout function so my code looks like:

$("input").blur(function() {
    alert("Unfocused");
});

This works for my input fields no problem. But for my radio button inputs it doesn't work. I looked through the docs and google and couldn't figure out why.

Answer 1

$("input:radio").blur(function() {
    alert("Unfocused");
});

Test this code.

Test with text and radio..

THIS DOESN'T WORK IN SAFARI AND CHROME BECAUSE THEY ARE WEBKIT BASED.

Answer 2

Just put : before like this:

$(":input").blur(function() {
    alert("Unfocused");
});

The :input filter selector selects all type of inputs.

From Docs:

Description: Selects all input, textarea, select and button elements.

http://api.jquery.com/input-selector/

---

To select radio only, you should use :radio filter selector instead:

$(":radio").blur(function() {
    alert("Unfocused");
});

To get little speed gain, you should prepend keyword input like this:

$("input:radio").blur(function() {
    alert("Unfocused");
});

More Info:

http://api.jquery.com/radio-selector/

---

Here are more form selectors:

Form Selectors

There are a few selectors for form elements:

* :input Selects all form elements (input, select, textarea, button).
* :text Selects all text fields (type="text").
* :password Selects all password fields (type="password").
* :radio Selects all radio fields (type="radio").
* :checkbox Selects all checkbox fields (type="checkbox").
* :submit Selects all submit buttons (type="submit").
* :image Selects all form images (type="image").
* :reset Selects all reset buttons (type="reset").
* :button Selects all other buttons (type="button").
* :file Selects all <input type="file">.