为什么我的jQuery不更新DOM？

Question

Ok, so I'm making a login screen for an application with a button that says "Not You?" which, when clicked, brings up a text-box to update the username on the screen. The issue I'm having is: the username updates once, but when tried again doesn't work. What's wrong with my jQuery?

Here's my 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);

And HERE'S a link to the CodePen.

Thanks!

Answer 1

From the docs , The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call,so for first time it is working fine but when first time .replaceWith() is used it replaces whole '.new-input' with class 'name' ,that is why afterwards it is creates problems.

Instead of

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

Try

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

OR

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

see here.

Answer 2

When you are doing replaceWith(), you are actually removing the whole tag with class '.name'. So in the next time the code is unable to find any object with class 'name'.

Use '.html()' to make it work.

Answer 3

You can change your replaceWith() line with the following:

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

replaceWith() actually replaces the whole DOM element that has the class of name .

.replaceWith() | jQuery API Documentation