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();
});

演示：小提琴

由于您有多个带有 id 的元素，li请不要使用 id 属性，请改用 class，因为元素的 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>