Question

我的标签ID为＆lt; lblUserPhoneNumber＆＃39;当我双击元素时，我希望它变成一个文本框，到目前为止工作正常。然后，当我在文本框外部单击时，我希望它转换回标签（已完成）并将更新的记录显示到控制台中。

我遇到的问题是它没有显示更新的结果，只显示以前的结果

之前：12345678910

之后：12345678911

显示：12345678910（前一个结果）

$(document).ready(function () {
    $("#lblUserPhoneNumber").dblclick(function () {
        var text = $(this).text();

        var input = $('<input id="lblUserPhoneNumber" type="text" value="' + text + '" />')

        $(this).text('').append(input);
        input.select();

        input.blur(function () {
            var text = $(this).val();
            $(this).parent().text(text);
            $(this).remove();
        });
    });


    $("#lblUserPhoneNumber").change(function () {
        console.log($(this).html());
    });
});

所以在这里我有.change事件被调用，我有其他事件，如聚焦，但没有给我我正在寻找的结果，是我在正确的轨道上或我是完全的？

Answer 1

首先考虑一些事项。

尽量避免将元素替换为其他元素并保持相同id。这会导致混乱。

处理change的{{1}}事件时，请改为处理input。它通常不会以前一种方式工作。

要显示input，input或select的内容，请使用textarea代替.val()。

当您动态操纵.html()并且某些元素可能不会一直存在时，请使用事件委派。

DOM

Demo

将元素更改为输入然后获取更新记录

1 个答案: