I'm working on an interactive web application, currently set up on (user: [email protected], password: demo). It allows you to drag items containing images and/or text from the left sidebar onto the workspace on the right and resize/edit them, among other things.

I've set up an onblur event handler to fire (in theory at least) when a newly created object looses focus, and for testing purposes, that handler simply makes an alert() call. The problem is that the handler doesn't get triggered at all. Bellow is a piece of the code used in creating those new objects:

obj.id = 'mesh-obj-'+current_object_id;
jqObject
    .attr('id',obj.id)
    .attr('item_no', current_object_id)
    .removeClass('dragged transparent tpl-obj no-user-select')
    .addClass('mesh-obj')
    .css({
        'z-index' : current_z_index,
        'left' : obj.position.left - mesh.position.left - mesh.borderWidth,
        'top' : obj.position.top - mesh.position.top - mesh.borderWidth,
        'right' : 'auto'
    })
    .on("focusout blur", function(event){
        alert('object lost focus'); 
    })
    .appendTo('#mesh');

Does the blur event only trigger for form inputs, or any HTML tag at all? If the latter, then what is that I'm doing wrong?

I'm working on an interactive web application, currently set up on http://picselbocs./projects/goalcandy (user: [email protected], password: demo). It allows you to drag items containing images and/or text from the left sidebar onto the workspace on the right and resize/edit them, among other things.

I've set up an onblur event handler to fire (in theory at least) when a newly created object looses focus, and for testing purposes, that handler simply makes an alert() call. The problem is that the handler doesn't get triggered at all. Bellow is a piece of the code used in creating those new objects:

obj.id = 'mesh-obj-'+current_object_id;
jqObject
    .attr('id',obj.id)
    .attr('item_no', current_object_id)
    .removeClass('dragged transparent tpl-obj no-user-select')
    .addClass('mesh-obj')
    .css({
        'z-index' : current_z_index,
        'left' : obj.position.left - mesh.position.left - mesh.borderWidth,
        'top' : obj.position.top - mesh.position.top - mesh.borderWidth,
        'right' : 'auto'
    })
    .on("focusout blur", function(event){
        alert('object lost focus'); 
    })
    .appendTo('#mesh');

Does the blur event only trigger for form inputs, or any HTML tag at all? If the latter, then what is that I'm doing wrong?

• javascript
• jquery
• events
• onblur

• From jQuery doc: The blur event is sent to an element when it loses focus. 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. An element can lose focus via keyboard mands, such as the Tab key, or by mouse clicks elsewhere on the page. – arma Commented May 9, 2012 at 8:13
• Could it be that the blur handler isn't being attached? Do you need to put a ma between focusout, blur? – Jamie Dixon Commented May 9, 2012 at 8:25
• No mas. Just separated by a space. – Andrei Oniga Commented May 9, 2012 at 8:25

2 Answers 2

you need to assign tabindex to your html elements in order to capture the blur event

html:

<div id="box1" class="box" tabindex="1">div 1</div>
<div id="box2" class="box" tabindex="2">div 2</div>

js:

$('.box').blur(function(){
   console.log(this)
})

Blur event can be used not only on form elements.

Read this article for more information.