Textarea created through jQuery - but not editable, why?

Question

I have this simple HTML code...

<div onclick='jsComment();'>Click to comment</div>

And the jsComment() function just creates a form with a textarea and a button and replaces HTML content of the div

function jsComment(id){

var form = '<form action="modules.php?name=some_url&id='+id+'" method="post" name="post">';
form += '<b>Post something!</b><br />';
form += '<textarea name="noticia" cols="100" rows="5" maxlength="299" style="overflow: hidden; border: none; border-top: 1px solid LightGrey; margin: 6px;"></textarea><br />';
form += '<input type="hidden" name="noticiaId" value="'+id+'" /><input type="submit" name="op" value="Comment!"></form>';   
jQuery('#noticia_'+id).html(form);

}

HTML is generated correctly, but I cannot write in the textarea. When I place the cursor inside the textarea it just disappears... same for the submit button, it appears to be disabled... what's going wrong here? Maybe a CSS question?

Thank you very much

Answer 1

I think that the problem is here

 jQuery('#noticia_'+id).html(form);

you should use

 jQuery('#noticia_'+id).replaceWith(form);

i created a simplified fiddle here http://jsfiddle.net/dzytP/

Generally speaking, you should append elements to the DOM and not change the html to have things like <FORM> work when added dynamically