jquery - Jquery ぼかし操作

Question

複数のdivがあります。各divには「編集」ボタンとともにテキストが含まれています。ボタンをクリックすると、テキストボックスがdivに追加されます。私の要件は、テキストボックスを受け入れる場所をクリックすると、テキストボックスが非表示になり、divのみ「編集」ボタンはそのまま表示されます。助けてください。

Answer 1

次の HTML があるとします。

<div class="outer">
    <div>
        <span>text</span><input class="edit" type="button" value="Edit" />
    </div>
    <div>
        <span>text</span><input class="edit" type="button" value="Edit" />
    </div>
    <div>
        <span>text</span><input class="edit" type="button" value="Edit" />
    </div>
</div>​

次のように JavaScript を使用できます。

$(".edit").click(function() {
    var $new = "<input type='text' class='edittext'></input>";
    $(this).parent().append($new);
    $(this).parent().find(".edittext").focus();

});

$(".outer").on("focusout", ".edittext", function() {
    $(this).remove();
});​

サンプル フィドル: http://jsfiddle.net/johnkoer/mrJcp/9/