Question

我有一个包含另一个嵌套div的div html

<div class="draggable">
   <div class="edit_text">Hello</div>
</div>

现在我有一个代码，我正在尝试编辑edit_text div

的文本

这是我的代码

 if (key == 'edit') {
    alert('hii');
    //$(this).find('.edit_text').remove();
    var content = $(this).find('.edit_text').text();

    var width = $(this).width() - 1;
    var height = $(this).height() - 4;

    var $editbox = $("<input type='text'" +
        "style='width:" + width + ";" +
        "height:" + height + ";" +
        "border:none" +
        "' value='" + content + "' />");


    $(this).find('.edit_text').empty();
    $(this).find('.edit_text').prepend($editbox);
    $editbox.focus();
    $editbox.select();


    $($editbox).bind("blur",

    function () {
        $(this).find('.edit_text').html($($editbox).val());
        alert($($editbox).val());
        $($editbox).remove()
    });
}

问题在本节

$(this).find('.edit_text').html($($editbox).val());
alert($($editbox).val());  
$($editbox).remove()

当我在div外部点击时，警报显示$editbox.val()

但是一旦删除了编辑框，内部div的html即edit_text稍微缺失

我做错了什么？

Answer 1

$ editbox位于.edit_text div内。你的代码行：

$(this).find('.edit_text').html($($editbox).val());

试图在DOM中向下看;事实上，你需要查找：

$(this).closest('.edit_text').html($($editbox).val());

这也应该注意删除$ editbox，所以你可以删除这一行：

$($editbox).remove()

内联编辑代码出错

1 个答案: