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/