Jquery, blur event inside click event -

i'm new jquery, , i'm not able understand on how use 'blur' event inside 'click' event.

my project has

• a toolbox: there button add elements canvas
• a canvas: elements added appear here
• a editor window: can see/edit elements properties

here sketch of project:fiddle

each element add canvas have 2 representations: object, , visual 1 div.

the point is: when add elements canvas can click them, , can edit atributes in editor window. elements have text atribute , it's name.

but if have example: 2 elements on canvas , try change text atribute of 1 of them (in editor window), changes elements text attribute. problematic function following:

$(function(){    canvas.delegate('.myelement','click', function(){     var obj = this;     mytextarea.val(this.text);     mytextarea.on('blur',function(){         obj.text = mytextarea.val();     }); }); 

});

can tell me i'm failling? guys

you binding blur event each time element clicked.

you declare variable keep track of element clicked:

var currentelement = null; 

and bind blur handler:

mytextarea.on('blur',function(){     if (currentelement) {         $(currentelement).text(mytextarea.val());     } });  canvas.delegate('.myelement','click', function(){     currentelement = this; });