Question

Jquery关于点击后改变元素内容和增加取消按钮，点击取消按钮又还原的问题。

<div class="div">
<p class="p">..内容..</p>
<a href="javascript:void(0)" class="editbtn">修改</a>
</div>
我想吧上面的一段代码点击修改按钮后变成：
<div class="div">
<input type="text" value="..内容.." >
<a href="javascript:void(0)" class="cancelbtn">取消修改</a>
</div>
jquery代码如下：
<script>
$('.editbtn').on("click",function(){

var $p =$(".p").text();
var $div = $(".div").html();
$(".div").html('<input type="text" value='+ $p +'><a href="javascript:void(0)" class="cancelbtn">取消</a>');
$('.cancelbtn').click(function(){
$(".div").html($div);

});
});
</script>
以上代码可以实现我说的改变，可是当我点击取消修改按钮回到之前，再点击修改按钮就不能改变了，除非刷新页面才可以，不知道是为什么，求告知，我是新手。

Answer 1

最好在超链接上加个ID ，比如：id="xx",接下来的方法就是
$("#xx").on("",function(){
if($(this).attr("class")=="editbtn"){
$(this).removeClass("editbtn");

$(this).addClass("cancelbtn");

$(this).text("取消修改");

$(this).prev().remove();

$(this).before('<input type="text" value="..内容.." >');

}else{
$(this).removeClass("cancelbtn");

$(this).addClass("editbtn");

$(this).text("修改");
$(this).prev().remove();
$(this).before('<p class="p">..内容..</p>');
}

});

追问

大侠，真棒！这个代码可以动态的切换了，但是 内容是动态显示了，要是内容是动态的 怎么赋值呢？

追答

$("#xx").on("",function(){
var content = "";
if($(this).attr("class")=="editbtn"){
$(this).removeClass("editbtn");

$(this).addClass("cancelbtn");

$(this).text("取消修改");
//先把内容拿出来
content = $(this).prev().text();
$(this).prev().remove();

$(this).before('');

}else{
$(this).removeClass("cancelbtn");

$(this).addClass("editbtn");

$(this).text("修改");
//先把内容拿出来
content = $(this).prev().val();
$(this).prev().remove();
$(this).before(''+content +'
');
}

});

追问

完美解决！！！

Answer 2

$('.cancelbtn').click(function(){
$(".div").html($div);
});
拿到外面来，单独写一个function

追问

放外面点取消就不能还原了哦，大哥能给我改改代码么

追答

你的代码非常不好看：

..内容..

修改

function modify()
{
$(".div").html('
取消');
}

function cancel()
{
$(".div").html(

..内容..

修改
);
}
这样写试一试

追问

这个不行哦！

追答

赋值不行还是？

追问

你的代码有点问题，我改了点还是和我之前的一样，可以实现还原，但是我的问题不是这里，是还原后再点击修改就动不了，再点击无效了，不能顺利的来回切换，只能来一次

追答

我也没有测试过，我认为通过直接赋值的办法来实现来回切换这不会牵扯到session的问题，你再试一试吧。

追问

上面有位大侠给出的代码不错，可以动态切换了