通过 jQuery 创建的 Textarea - 但不可编辑，为什么？答案

【问题标题】：Textarea created through jQuery - but not editable, why?通过 jQuery 创建的 Textarea - 但不可编辑，为什么？
【发布时间】：2011-12-20 12:32:23
【问题描述】：

我有这个简单的 HTML 代码...

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

jsComment() 函数只是创建了一个带有文本区域和按钮的表单，并替换了 div 的 HTML 内容

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 生成正确，但我无法在 textarea 中写入。当我将光标放在文本区域内时，它就消失了……提交按钮也一样，它似乎被禁用了……这里出了什么问题？也许是一个 CSS 问题？

非常感谢

【问题讨论】：

如果您发布其余代码可能会有所帮助，这就是问题所在。
请附上jsComment的源代码。如果您可以包含 jsfiddle 来复制错误，那也很好。
能否包含创建 html 的代码。这将有助于我们找到问题。
jsComment() 函数代码添加到主消息中。谢谢
注意溢出：隐藏；只是尝试解决这个问题，不可能是问题本身

标签： jquery html css textarea

【解决方案1】：

我认为问题出在这里

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

你应该使用

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

我在这里创建了一个简化的小提琴http://jsfiddle.net/dzytP/

一般来说，您应该将元素附加到 DOM，而不是更改 html 以在动态添加时让 <FORM> 等内容起作用

【讨论】：

谢谢！ replaceWith() 工作正常！不知道那个函数，之前一直用html()

【解决方案2】：

更新

使用 .replaceWith() 代替，参见 jsfiddle 进行比较。

我尝试了多种方法来解决这个问题，我能想到的最好方法是定期（非动态）编写并在点击时显示它。

查看小提琴：http://jsfiddle.net/c4urself/tFxDs/ 了解我尝试过的所有选项

$("commentcontainer").click(function() {
    $(this).html("").next(".textareacontainer").show();
});

【讨论】：

我认为他的问题在于他使用html() 将表单添加到DOM。如果您使用 append() 或 prepend() 一切正常（或我建议的 replaceWith()）
@Nicola 你完全正确，现在的问题是，为什么它不能与 .html() 一起使用？
谢谢！ replaceWith() 工作正常！不知道那个函数，之前一直用html()

【解决方案3】：

嗯.. 试图复制你的问题.. 但不能.. 看看这个小提琴。这是我会做的方式..当然你仍然可以包括你的ID..http://jsfiddle.net/pixelass/CpmvV/

【讨论】：