javascript - 动态添加的文本区域不起作用

Question

有一个我想逐行编辑的表格，用户单击包含文本的单元格，它会更改为文本区域。

Textarea 添加很好，但完全不起作用。

这是一个小提琴

或者我正在尝试做的代码？

<div id="click"></div>

#click {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

$(function(){
    $('#click').click(function(){
        $(this).html("<textarea></textarea>");
    });
});

Answer 1

添加focus事件后添加textarea.

$(function () {
    $('#click').click(function () {
       $(this).html("<textarea></textarea>").find("textarea").focus();
    });
});

更新小提琴：http: //jsfiddle.net/na7sZ/2/

你也可以这样做：

$('#click').click(function () {
        var textarea = $('<textarea/>');
        $(this).html(textarea);
        textarea.focus();
});

小提琴：http: //jsfiddle.net/na7sZ/5/

Answer 2

那是因为您的 textarea 在clickdiv 内，因此单击 textarea 也是单击 div，从而删除/创建新的 textarea。

将此添加到您的代码中：

$('#click').on('click', 'textarea', function(e){
    e.stopPropagation()
})

它将阻止事件冒泡，而不是重新创建文本区域。

小提琴：http: //jsfiddle.net/na7sZ/4/