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

Question

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

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

之前: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 事件，我还有其他事件，例如 focusout，但没有一个能给我我正在寻找的结果，我是在正确的轨道上还是完全正确？

Answer 1

首先是一些注意事项。

尽量避免用其他元素替换元素并保持相同的 id。这会导致混淆。

在处理 input 的 change 事件时，请改为处理 input。它通常在前一种方式下不起作用。

要显示 input、select 或 textarea 的内容，请使用 .val() 而不是.html()。

当您动态操作 DOM 并且某些元素可能不会一直存在时，请使用事件委托(delegate)。

$(function () {
    // Using event delegation.
    $(document).on('dblclick', '#lblUserPhoneNumber', function () {
        var text = $(this).text();

        // Here we use a different id for the input.
        var input = $('<input>', {
            id: 'inputUserPhoneNumber',
            type: 'text',
            value: text
        });

        // Replacing the label with the new input.
        $(this).replaceWith(input).select();
    });

    // Using event delegation. Also we attach multiple event handlers at once.
    $(document).on({
        input: function () {
            console.log($(this).val());
        },
        blur: function () {
            var value = $(this).val();

            var label = $('<span>', {
                id: 'lblUserPhoneNumber',
                text: value
            });

            // Replacing the input with the new label.
            $(this).replaceWith(label);
        }
    }, '#inputUserPhoneNumber');
});

Demo