jQuery使用replaceWith将input替换为p元素失效问题求解

replaceWith 未生效是三处逻辑错误导致：

• 作用域异常：blur 回调中使用的 time 变量是 click 回调的局部变量，当前作用域下未定义，代码运行到此处会直接抛出引用错误中断执行，替换逻辑根本不会触发。
• 元素操作错误：
  1. 预期生成的p元素class为task m-auto，代码中错写为hour m-auto，不符合属性要求
  2. 输入为空的判断分支中，仅创建了p元素对象，未调用replaceWith将元素插入DOM，创建的节点直接被丢弃，页面无变化
• 事件绑定失效：事件直接绑定在初始加载的.task元素上，第一次点击后原p元素被input替换移出DOM，后续动态生成的新p元素没有绑定点击事件，二次点击会无响应。

替换原有JS逻辑即可：

// 事件委托到静态父容器，适配动态替换的内部元素
$(".taskWrapper").on("click", ".task", function () {
    const text = $(this).text().trim();
    const time = $(this).attr("time");
    // 输入框挂载对应time值，供失焦时读取
    const textInput = $("<input>")
        .prop("maxlength", "114")
        .val(text === "Enter task here" ? "" : text)
        .data("time", time);
    $(this).replaceWith(textInput);
    textInput.trigger("focus");
});

$(".taskWrapper").on("blur", "input", function () {
    const text = $(this).val().trim();
    const time = $(this).data("time");
    // 生成符合属性要求的p节点
    const taskP = $("<p>")
        .addClass("task m-auto")
        .attr("time", time)
        .text(text || "Enter task here");
    // 统一执行替换
    $(this).replaceWith(taskP);
});

• 事件统一绑定在始终存在的静态父元素.taskWrapper上，通过选择器过滤触发事件的子元素，无论内部节点怎么替换，事件都能正常响应
• 替换为输入框时将对应time值存在input的自定义data属性上，失焦时直接从当前input读取，不存在跨作用域变量找不到的问题
• 合并重复的p节点创建逻辑，固定class为task m-auto，自动绑定对应time属性，输入为空时显示默认提示文案，所有分支都会执行DOM替换，不会出现节点创建后未插入的问题

内容的提问来源于stack exchange，提问作者Enzo Tragnone