為什么我的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文檔