javascript - 新しい同じhtml要素を置き換えずにいくつかのhtml要素を保持する

Question

li 内にチェックボックスがあります。li を dlbclick で編集できるようにしたいのですが、チェックボックスが削除されます。チェックボックスをテキスト値と一緒に含めることができますが、そうしたくありません。他の方法はありますか?

http://jsfiddle.net/64V4p/4/

$(document).on('dblclick', '#li', function () {
    oriVal = $(this).text();
    $(this).text("");
    input = $("<input type='text' id='input'>");
    input.appendTo($(this)).focus();

});

$(document).on('focusout', '#input', function () {
    if ($(this).val() != "") {
        newInput = $(this).val();
        $(this).hide();
        $(this).closest('li').text(newInput);
    } else {
        $(this).closest('li').text(oriVal);
    }

});

html

<ul>
    <li id="li">
        <input type="checkbox" name="1" value="1">item 1</li>
    <li id="li">
        <input type="checkbox" name="2" value="2">item 2</li>
</ul>

Answer 1

見る

<ul>
    <li class="li">
        <input type="checkbox" name="1" value="1"/><span>item 1</span>
    </li>
    <li class="li">
        <input type="checkbox" name="2" value="2"/><span>item 2</span>
    </li>
</ul>

と

$(document).on('dblclick', '.li', function () {
    var $this = $(this),
        text = $.trim($this.text());
    $this.data('text', text);
    $("<input />", {
        value: text,
            'class': 'edit'
    }).appendTo($(this).find('span').empty()).focus();
    $this.find('input[type="checkbox"]').hide();
});

$(document).on('focusout', '.edit', function () {
    var value = $.trim(this.value),
        $li = $(this).closest('li');
    $li.find('span').text(value == '' ? $li.data('text') : value)
    $li.find('input[type="checkbox"]').show();
});

デモ:フィドル

liid 属性を使用しない複数の要素があるため、要素の ID はドキュメント内で一意である必要があるため、代わりにクラスを使用します

Answer 2

これをチェックして ：

http://jsfiddle.net/64V4p/4/

「li」の外側にあるチェックボックスをタップするだけです。次に、CSS を使用してテキストに合わせてチェックボックスを配置できます。

<ul>
    <input type="checkbox" name="1" value="1"><li id="li">item 1</li>
    <input type="checkbox" name="2" value="2"><li id="li">item 2</li>
</ul>