javascript - 为什么我的 jQuery 不更新 DOM?

标签 javascript jquery html css

好吧,我正在为一个应用程序制作一个登录屏幕,上面有一个按钮,上面写着“不是你?”单击它时,会弹出一个文本框来更新屏幕上的用户名。我遇到的问题是:用户名更新一次,但再次尝试时不起作用。我的 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);

HERE'S CodePen 的链接。

谢谢!

最佳答案

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

代替

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

尝试

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

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

see here.

关于javascript - 为什么我的 jQuery 不更新 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27264245/

相关文章:

javascript - 在页面加载时展开切换的 Div

javascript - 根据json更新html

html - Web 标准 - 页面大小

javascript - 无法识别 Protractor 中的 css/xpath 元素

javascript - 即使在 IE9 上没有点击 x 也显示占位符

javascript - 根据用户输入向表中插入行

javascript - 为什么 Javascript 不能在 digital.Dialog 弹出窗口中工作?

javascript - 多个条件成立后执行

jquery - 我可以在 CSS 中制作 Off-Canvas 滑出式菜单吗?

html - 两行文本并排居中,HTML/CSS