Question

I am trying to use blur on td,p without any success. jQuery documentation says that

"Originally, this event was only applicable to form elements, such as
input. In recent browsers, the domain of the event has been extended
to include all element types."

So it should fire on p/td tags.
Here is my sample code:

<p>Test 2
</p>
<p>Test 1
</p>
<script>
    $(document).ready(function () {
        $("p").blur(function () {
            alert('blur');
        });
        
    });
</script>

Note however that if I try to invoke blur programatically it is firing.

$("p").blur();

I am assuming that when I click on the first p and then click anywhere else the blur should fire…
Am I missing something here?

Answer 1

Blur is the opposite event of a focus event. A p tag cannot be focused unless it has a tabindex set so your p tags won’t blur.

Add the tabindex attribute to your p tags and a blur will be fired after tabbing or clicking e.g.

<p tabindex="10">test 1</p>
<p tabindex="11">test 2</p>

focusout event: http://jsfiddle.net/b98Bs/

blur event: http://jsfiddle.net/b98Bs/1/

(If you click the p, remember to click away from it after to fire the event)

UPDATE:

I have included a second jsfiddle to show that blur, as well as focusout, events also fire with an alert displaying the text of the p element that is losing focus.

If you want the tabindex to follow the order of the elements in the document, set them both to tabindex=”0″: http://jsfiddle.net/b98Bs/2/