Question

我尝试在“编辑文本脚本”和

页面上进行操作

我的代码是

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

HTML ::

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

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

这个JSFiddle for it http://jsfiddle.net/BQGPA/12/检查它

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

Answer 1

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

WORKING JSFIDDLE DEMO

这样你就不会失去你造型的变化：

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

致：

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

WORKING JSFIDDLE DEMO

Answer 2

这可能就是你想要的：

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

<强> jsFiddle example

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

Answer 3

尝试

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

您无法将click事件分配给不存在的元素。您可以使用委托，或者只是在动态创建元素后添加click事件。

在页面上追加后，元素未定义

3 个答案: