爲什麼我的jQuery沒有更新DOM？

好的，所以我正在爲一個應用程序的登錄屏幕提供一個「不是你？」按鈕。點擊該按鈕後，會彈出一個文本框來更新屏幕上的用戶名。我遇到的問題是：用戶名更新一次，但再次嘗試時不起作用。我的jQuery有什麼問題？爲什麼我的jQuery沒有更新DOM？

這裏是我的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);

而且HERE'S的鏈接CodePen。

謝謝！

來源

2014-12-03 bwalbs

從docs，該.replaceWith()方法去除DOM的內容，並插入它的位置與單個調用新的內容，所以第一次工作正常，但是當第一次.replaceWith()用它替換整個'.new-input'與'name'類這就是爲什麼之後會產生問題的原因。取而代之的

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

嘗試

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

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

see here.

來源

2014-12-03 05:29:22

當你在做replaceWith（），你實際上是消除在W類'.name'的孔標籤。所以在下次代碼無法找到類'名稱'的任何對象。

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

來源

2014-12-03 05:34:32 nawaz1989

您可以通過以下更改replaceWith()行：

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

replaceWith()其實是將具有類name整個DOM元素。

.replaceWith() | jQuery API Documentation

來源

2014-12-03 05:37:18 justinpinili

爲什麼我的jQuery沒有更新DOM？

回答

相關問題