使用Javascript进行现场编辑

我有一个学校作业，我希望有一个现场编辑管理面板。 我对其进行了编码，但我无法使其正常工作，因为每次我双击其中一个，然后再单击它，它都会将该值替换为以前的值

<script type="text/javascript">

    $(function() {
        var bound = $("p").bind("dblclick", function(event) {

            event.stopPropagation();
            var currentEle = $(this);
            var value = $(this).html();
            edit(currentEle, value);
        });
    });

    function edit(currentEle, value) {
        $(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
        $(".tedit").focus();

        $(".tedit").keyup(function(event) {
            if (event.keyCode == 13) {
                currentEle.parent('p').html($(this).val().trim());
            }
        });

        $(document).click(function() {
            var value1234 = $(".tedit").val().trim();
            $("p").removeClass();
            currentEle.html(value1234);

        });
    }

</script>  

$（函数（）{
变量绑定=$（“p”）.bind（“dblclick”，函数（事件）{
event.stopPropagation（）；
var currentEle=$（此值）；
var value=$（this.html（）；
编辑（当前元素，值）；
});
});
功能编辑（currentEle，值）{
$（currentEle.html（“”）；
$（“.tedit”）.focus（）；
$（“.tedit”）.keyup（函数（事件）{
如果（event.keyCode==13）{
currentEle.parent（'p'）.html（$（this.val（）.trim（））；
}
});
$（文档）。单击（函数（）{
var value1234=$（“.tedit”）.val（）.trim（）；
$（“p”）.removeClass（）；
currentEle.html（value1234）；
});
}

---

这是JSFIDLE

问题在于，每次编辑时，您都会创建一个附加到文档的新单击处理程序，该处理程序在创建时引用了当前元素

当您编辑另一个对象时，此处理程序仍然处于活动状态，并且仍然有对旧元素的引用（查找闭包以了解原因），但它从屏幕上的

.tedit

中获取要添加到p的值，因此最终它们都会使用相同的文本进行更新

一个快速解决方法是将这个点击处理程序从dit函数中取出并声明一次，检查屏幕上是否有编辑，然后使编辑父html等于输入框的值

$(function () {
    var bound = $("p").bind("dblclick", function (event) {

        event.stopPropagation();
        var currentEle = $(this);
        var value = $(this).html();
        edit(currentEle, value);

    });
});

function edit(currentEle, value) {
    $(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
    $(".tedit").focus();

    $(".tedit").keyup(function (event) {
        if (event.keyCode == 13) {
            currentEle.parent('p').html($(this).val().trim());
        }
    });


}

$(document).click(function () {
    if ($(".tedit").length) {
        var value1234 = $(".tedit").val().trim();
        $("p").removeClass();
        $(".tedit").parent().html(value1234);
    }

});

$（函数（）{
变量绑定=$（“p”）.bind（“dblclick”，函数（事件）{
event.stopPropagation（）；
var currentEle=$（此值）；
var value=$（this.html（）；
编辑（当前元素，值）；
});
});
功能编辑（currentEle，值）{
$（currentEle.html（“”）；
$（“.tedit”）.focus（）；
$（“.tedit”）.keyup（函数（事件）{
如果（event.keyCode==13）{
currentEle.parent（'p'）.html（$（this.val（）.trim（））；
}
});
}
$（文档）。单击（函数（）{
如果（$（“.tedit”）.length）{
var value1234=$（“.tedit”）.val（）.trim（）；
$（“p”）.removeClass（）；
$（“.tedit”）.parent（）.html（value1234）；
}
});

---

我来这里只是想寻求一些帮助，因为我自己找不到问题所在。如果你不想帮忙，那就不要了。但为什么你们要花时间到这里来，开始发火呢？你们的问题应该表明你们在问题上花了时间，并且在某些事情上卡住了。不是-“我就是不能让它工作”，也上传你的代码到。具体描述什么不起作用。所以人们会问最少的问题，只会给你帮助。记住这个网站可以提问/获得对其他人有用的答案。不是你个人的问题解决者。请创建一个复制你的问题与相关的HTML包括。我的问题是，当我双击一个p标签，它应该给它类tedit，因为它是这样做的。但当我从输入中点击并进入一个新的页面时，我就会编辑它。我用新标签的值替换了以前编辑的p标签。非常感谢您的帮助。感谢：）