为什么我的jQuery不更新DOM？

Question

好的，所以我正在为一个应用程序创建一个登录屏幕，其中有一个按钮，上面写着“不是吗？” 单击时，会弹出一个文本框来更新屏幕上的用户名。 我遇到的问题是：用户名更新一次，但再次尝试时不起作用。 我的jQuery有什么问题？

这是我的jQuery：

var main = function(){
$('.not').click(function(){
    $('.login-wrap').fadeOut(300, function(){
        $('.not-you').fadeIn(300); 
    });
});

$('.enter').click(function(){
    $('.name').replaceWith($('.new-input').val());
    $('.not-you').fadeOut(300, function(){
        $('.login-wrap').fadeIn(300);
    });
  });
}

$(document).ready(main);

这里是CodePen的链接。

谢谢！

Answer 1

从文档中 ， .replaceWith()方法从DOM中删除内容并通过一次调用在其位置插入新内容，因此第一次它正常工作但是当第一次使用.replaceWith()它会替换整个'.new-input' input'with class'name 'name' ，这就是为什么之后它会产生问题。

代替

$('.name').replaceWith($('.new-input').val());

尝试

$('.name').html($('.new-input').val());

要么

$('.name').text($('.new-input').val());

看这里。

Answer 2

在执行replaceWith（）时，实际上是使用类“.name”删除整个标记。 因此，在下一次代码无法找到具有类“name”的任何对象时。

使用'.html（）'使其工作。

Answer 3

您可以使用以下内容更改replaceWith()行：

$('.name').replaceWith("<span class='name'>"+$('.new-input').val()+"</span>");

replaceWith()实际上替换了具有name类的整个DOM元素。

.replaceWith（）| jQuery API文档