Question

我有一份学校作业，我很乐意拥有一个现场编辑管理面板。我对此进行了编码，但我无法让它正常工作，因为每次双击一次然后输出它都会将值替换为之前的值。

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

这是jsfiddle http://jsfiddle.net/x6e16d3n/3/

Answer 1

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

当您编辑另一个对象时，此处理程序仍然处于活动状态，并且仍然具有对旧元素的引用（查找闭包以了解原因），但是正在将值添加到p .tedit是什么在屏幕上，所以最后他们都用相同的文字更新。

一个快速的解决方法是将这个点击处理程序从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/

使用Javascript在网站上进行编辑

1 个答案: