Changing element p with input text field issue jquery

Question

I am facing small issue while firing jquery event to replace element p or span with text field and onblur event replace back to p or span field.

Demo is here http://jsfiddle.net/yXcZG/

It works well for first time while clicking on p text, but failed when you repeat same process second time.

Can any one help me where should be the issue

Answer 1

jQueries .on selecor is used to attach to dynamic content, eg ajax and what you are doing. Normally you would just use $('.myClass').click(funcction(){}); but using a static class like you have done $('.cmtedit').on(... is problematic because once you clicked that class and it gets removed.. it no longer exists with the reference you created it with. So to use .on properly, you neeed to attach it to the document so it can always re attach to any dynamic content! :-)

.on( events [, selector] [, data] , handler(eventObject) )

$(document).on('click', '.cmtedit', function (e) {
    console.log(this);
   TBox(this);
});

Works well here..

http://jsfiddle.net/yXcZG/3/

Also remember to remove console.log(); if you are not usin Chrome or Firefox. It is not supported in IE at all!