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

これは、テキストエリアがclickdiv内にあるためです。したがって、テキストエリアをクリックすると、新しいテキストエリアを削除/作成するdivをクリックすることになります。

これをコードに追加します：

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

イベントのバブリングを停止し、テキストエリアを再作成しません。

フィドル: http://jsfiddle.net/na7sZ/4/