Javascript 元素在页上追加后未定义

我尝试在页面上编辑文本和脚本

我的代码是

JQUERY:：

$( "#box" ).click(function() {   
    var oldText = $( "#box" ).text();
    $( "#box" ).html('<textarea id="vbox">'+oldText+'</textarea>');
    $(this).attr("id","nbox");
});

$( "#savetxt" ).click(function() {
    alert($('vbox').val());
    $( "#nbox" ).html($('vbox').val());
    $("#nbox").attr("id","box");
}); 

<div id="box">
    sd,afmg dasfgds gdfs ,gd, gmfdsvdgfbhdsfg/dfs
    sdfgdfs
    gdfsgkdfg

</div>
<input id="savetxt" type="button" value="Save" />

$（“#框”）。单击（函数（）{
var oldText=$（“#框”）.text（）；
$（“#框”）.html（“”+oldText+“”）；
$（this.attr（“id”，“nbox”）；
});
$（“#savetxt”）。单击（函数（）{
警报（$（'vbox'）.val（））；
$（“#nbox”）.html（$（'vbox'）.val（））；
$（“#nbox”）.attr（“id”，“box”）；
}); 

HTML:：

$( "#box" ).click(function() {   
    var oldText = $( "#box" ).text();
    $( "#box" ).html('<textarea id="vbox">'+oldText+'</textarea>');
    $(this).attr("id","nbox");
});

$( "#savetxt" ).click(function() {
    alert($('vbox').val());
    $( "#nbox" ).html($('vbox').val());
    $("#nbox").attr("id","box");
}); 

<div id="box">
    sd,afmg dasfgds gdfs ,gd, gmfdsvdgfbhdsfg/dfs
    sdfgdfs
    gdfsgkdfg

</div>
<input id="savetxt" type="button" value="Save" />

sd、afmg dasfgds gdfs、gd、gmfdsvdgfbhdsfg/dfs
sdfgdfs
gdfsgkdfg

这是JSFIDLE，检查一下

---

当我尝试从textearea获取文本时，它返回

未定义的
这可能就是您想要的：

function edit() {
    $(this).off('click');
    var oldText = $("#box").html();
    $("#box").html('<textarea id="vbox">' + oldText + '</textarea> </br><input id="savetxt" type="button" value="Save" />');
}
$("#box").click(edit);
$(document).on('click', "#savetxt", function () {
    $("#box").html($('#vbox').val());
    $("#box").click(edit);
});

函数编辑（）{
$（此）.off（'click'）；
var oldText=$（“#box”）.html（）；
$（“#框”）.html（“+oldText+”
”）；
}
$（“#框”）。单击（编辑）；
$（文档）.on（'click'，“#savetxt”，函数（）{
$（“#box”）.html（$（'#vbox'）.val（））；
$（“#框”）。单击（编辑）；
});


一个错误是
$（'vbox'）.val（）
中缺少
#
，另一个错误是需要对动态创建的元素使用事件委派

$( document ).on('click', "#savetxt", function() {
    alert($('#vbox').val());
    $( "#nbox" ).html($('#vbox').val());
    $("#nbox").attr("id","box");
});  


这样您就不会丢失样式更改：

var oldText = $( "#box" ).text();

致：

试试看

$("#box").click(function () {   
    var oldText = $( "#box").text();
    $( "#box" ).html('<textarea id="vbox">' + oldText + '</textarea></br><input id="savetxt" type="button" value="Save" />');
    $(this).attr("id", "nbox");
    $("#savetxt").on("click", function () {
        alert($('#vbox').val());
        $("#nbox").html($('vbox').val());
        $("#nbox").attr("id", "box");
    });
});

$（“#框”）。单击（函数（）{
var oldText=$（“#框”）.text（）；
$（“#框”）.html（“+oldText+”
”）；
$（this.attr（“id”，“nbox”）；
$（#savetxt”）。在（“单击”，函数（）{
警报（$（'#vbox'）.val（））；
$（“#nbox”）.html（$（'vbox'）.val（））；
$（“#nbox”）.attr（“id”，“box”）；
});
});

不能将单击事件指定给不存在的元素。您可以为此使用委派，也可以在动态创建元素后简单地添加单击事件。
您忘记在vbox前面添加十六进制“#”。不是$（'vbox'），而是$（'vbox'）是的，谢谢，我在JSFIDLE中更新了