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
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..
Also remember to remove console.log(); if you are not usin Chrome or Firefox. It is not supported in IE at all!
I think as you are removing the obj by doing
$(obj).remove();
in the TBox function
so in the RBox function when you create it again you have to add click event handler
OR even better
I suggest you use
$(".cmtedit").live('click', function (e) {
instead of
$(".cmtedit").on('click', function (e) {
for reference http://api.jquery.com/live/
You are not attaching the click event to the new <p> created in the RBox() function. The following code works: (Test if out here: http://jsfiddle.net/yXcZG/5/)
$(".cmtedit").on('click', function (e) {
TBox(this);
});
$("input").live('blur', function (e) {
RBox(this);
});
function TBox(obj) {
var id = $(obj).attr("id");
var tid = id.replace("cmt_edit_", "cmt_tedit_");
var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() });
$(obj).parent().append(input);
$(obj).remove();
input.focus();
}
function RBox(obj) {
var id = $(obj).attr("id");
var tid = id.replace("cmt_tedit_", "cmt_edit_");
var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() });
$(obj).parent().append(input);
$(obj).remove();
$(".cmtedit").on('click', function (e) {
TBox(this);
});
}
If I were you though I would refactor it (live is expensive) and write it like this:
<style>
#cmt_edit_323 input { display: none; }
</style>
<div id="sample">
<p id="cmt_edit_323" class="cmtedit"><span>Sample Text</span><input type="text"></input> </p>
</div>
<script>
$(".cmtedit").on('click', function (e) {
TBox(this);
});
$(".cmtedit input").on('blur', function (e) {
RBox(this);
});
function TBox(obj) {
var input = $(obj).find("input");
var span = $(obj).find("span");
input.attr('value', span.text()).show().focus();
span.hide();
}
function RBox(obj) {
var input = $(obj);
var span = $(obj).parent().find("span");
span.html(input.attr('value')).show();
input.hide();
}
</script>
Check it here: JSFiddle
I couldn't make comment so I had to make it as an answer.
@ppumkin's answer was working with just a small issue - if you click out of the browser or switch tabs, two elements were added inside the parent.
I tried to check many other events to resolve this but with no luck.
So the easiest solution for me was to do a simple check before append the element in the RBox() function:
if ($("#" + tid).length == 0) {
$(obj).parent().append(input);
}
Apart from this I used .on() method for the blur as .live() is deprecated and no longer recommended.
