页面刷新后响应性才生效？HTML渲染延迟问题求助

问题现象 #

当屏幕尺寸切换到手机端（≤767px）时，搜索栏停留在顶部，仅页面刷新后才移动到移动端容器；切换回桌面端（≥768px）时，搜索栏消失，同样需刷新页面才会重新显示在桌面导航区域。

问题根源 #

1. 原searchwidget()函数仅在页面初始化时执行一次，未监听窗口resize事件，导致尺寸变化时无法触发位置调整。
2. 桌面端的元素选择器$('.header-top #search_widget')存在错误：搜索栏被移动到移动端容器后，已不在.header-top下，该选择器无法找到元素，导致无法移回桌面导航区域。

修复方案 #

修改JS代码如下，解决上述两个问题：

function searchwidget() {
    // 缓存DOM元素，避免重复查询
    const searchWidget = $('#search_widget');
    if ($(document).width() <= 767) {
        searchWidget.appendTo('.hidden-md-up.text-xs-center.mobile');
    } else {
        searchWidget.prependTo('.right-nav');
    }
}

// 页面加载完成后执行一次，确保初始位置正确
$(document).ready(function() {
    searchwidget();
    
    // 监听窗口resize事件，添加防抖避免频繁触发
    let resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        // 250ms延迟，等待窗口调整完成后再执行
        resizeTimer = setTimeout(searchwidget, 250);
    });
});

修复说明 #

• 缓存DOM元素：用const searchWidget存储搜索栏元素，减少重复DOM查询，提升性能。
• 修正选择器：直接使用ID选择器$('#search_widget')，确保无论元素当前在哪个容器下都能被找到。
• 添加resize监听：窗口尺寸变化时自动触发位置调整，无需手动刷新页面。
• 防抖处理：设置250ms延迟，避免窗口拖动过程中频繁执行DOM操作，优化性能。

额外检查 #

确认模板中的.right-nav（桌面端容器）和.hidden-md-up.text-xs-center.mobile（移动端容器）通过Bootstrap响应式类正确控制显示/隐藏，确保搜索栏在对应尺寸下可见。

内容的提问来源于stack exchange，提问作者Utility Monster