调用.load填充子div后父div main-container被移除的问题

问题描述 #

开发页面需求：

• 每10秒轮换博客文章
• 每5分钟刷新text-container中的内容

遇到异常：调用.load()方法完成后，main-container div被完全从页面移除，本地环境检查器显示该元素已从DOM中删除。

错误原因 #

问题出在reloadPosts函数中的$(this).unwrap()代码：

$('#text-container').load('xxx', function() {
  $(this).unwrap(); // 这行是核心问题
  // ...
});

$(this)指向#text-container元素，jQuery的unwrap()方法会移除当前元素的直接父元素——也就是#main-container，直接导致外层容器被删除。

修正方案 #

1. 移除错误的unwrap()调用：直接删掉这行代码，即可保留main-container。
2. 初始化slider索引变量i：原代码中i未初始化，会导致定时器首次执行时报错，需在$(document).ready中添加初始化语句。

修正后的JavaScript代码 #

$(document).ready(function() {
  var i = 0; // 初始化轮换索引
  reloadPosts();

  // 文章轮换逻辑
  setInterval(function() {
    $("#text-container p").css("opacity", "0");
    $("#text-container p:eq(" + i + ")").css("opacity", "1");
    i = (i === $('#text-container p').length - 1) ? 0 : i + 1;
  }, 10000);
});

var timeout = setTimeout(reloadPosts, 300000);

function reloadPosts() {
  $('#text-container').load('https://www.textise.net/showText.aspx?strURL=google.com', function() {
    timeout = setTimeout(reloadPosts, 300000);
  });
}

额外说明 #

如果你的初衷是处理加载回来的HTML内容（比如移除内容中的多余包裹元素），应该针对加载后的内容操作，而非移除当前元素的父容器。例如：

$('#text-container').load('xxx', function() {
  // 移除加载内容中多余的外层包裹
  $(this).find('.unwanted-wrapper').children().unwrap();
});

内容的提问来源于stack exchange，提问作者Digital Fusion