使用Javascript进行现场编辑

Edit on site with Javascript

本文关键字：现场 编辑 Javascript 使用      更新时间：2023-09-26

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

<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>

这是小提琴http://jsfiddle.net/x6e16d3n/3/

问题是因为每次编辑时都会创建一个新的点击处理程序，该处理程序附加到创建时引用当前元素的文档上。

当您编辑另一个对象时，这个处理程序仍然是活动的，并且仍然有对旧元素的引用（查找闭包以了解原因），但它将从屏幕上的.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);
    }
});

小提琴示例http://jsfiddle.net/x6e16d3n/11/

相关文章：