making element editable

E

Eduardo

Hi,

I wrote the following piece of code so that (a) when I click on a
paragraph, (b) it's content is copied, (c) the paragraph is replaced
with a text area and (d) the content from the former paragraph is
inserted into the new text area:

$(document).ready(function() {

$('p').click(function() {
var content = $(this).html();
$(this).replaceWith($('textarea'));
$('textarea').html(content);
});

});

Well, it's not working on Firefox 8.0. Any suggestions?

Thanks,

Eduardo

P.S.: Yes, I intend to put together something similar to Jeditable
(http://www.appelsiini.net/projects/jeditable) but for local editing
only, without sending edited elements to a server.
 
E

Eduardo

Thanks for helping, Stefan. You made me see I should use "<textarea></
textarea>" instead of just "textarea" to add the element. Working code
is:

$(document).ready(function() {

$('p').click(function() {
var content = $(this).html();
$(this).replaceWith($('<textarea></textarea>').html(content));
});


});

Eduardo
 
E

Eduardo

Well, I then went on to turning the textarea back into a paragraph
after edition, but the following code works only once:

$(document).ready(function() {

$('p').click(function(event) {
event.stopPropagation();
var content = $(this).html();
$(this).replaceWith($('<textarea></textarea>').html(content));
});

$('html').click(function() {
var content = $('textarea').html();
$('textarea').replaceWith($('<p></p>').html(content));
});


});

Any suggestions?

Eduardo
 
T

Thomas Allen

Eduardo said:
Well, I then went on to turning the textarea back into a paragraph
after edition, but the following code works only once:

$(document).ready(function() {
$('p').click(function(event) {
event.stopPropagation();
var content = $(this).html();
$(this).replaceWith($('<textarea></textarea>')
.html(content));
});

It only works once because the original event targets are being
destroyed or otherwise removed from the document. You need to bind to
the paragraph's click event once again.

Another option is to listen to the body's click event and determine if
your element was clicked. This delegation will work no matter how many
times you destroy the element, provided your replacement can be found.
$('html').click(function() {
var content = $('textarea').html();
$('textarea').replaceWith($('<p></p>').html(content));
});

I think that you want to listen to the textarea's "blur" event here
instead.

Thomas
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top