index.php中定义的things变量在change.php修改DOM后失效如何解决

问题原因 #

你最初定义的var things = $('#box li')是jQuery执行选择器查询瞬间的静态DOM元素集合，本身不具备自动同步DOM变更的能力，所以当#box下的li元素发生增减时，该变量存储的还是旧的元素列表。

解决方案 #

你可以根据自己的使用场景选择以下任意一种方案：

• 方案1：直接取消变量存储，使用时实时查询
  如果things的调用频率不高，最简单的方式就是每次需要用到#box li集合的时候，直接执行$('#box li')查询，拿到的永远是最新的DOM元素，无需处理变量更新逻辑。
• 方案2：DOM变更后手动更新变量
  首先确保你在index.php中定义的things是全局作用域变量（不要把变量定义在闭包或者局部函数内），然后在change.php对应的DOM修改操作完成后（比如AJAX请求成功的回调函数里），重新给变量赋值即可：

  // change.php对应的JS操作修改完#box内容后执行
  things = $('#box li');
  

• 方案3：使用原生实时DOM集合
  原生DOM的getElementsByTagName返回的是自动同步DOM变化的实时HTMLCollection，你可以按如下方式定义变量，后续使用时直接转成jQuery对象即可，无需手动更新：

  // index.php中定义
  const things = document.getElementById('box').getElementsByTagName('li');
  
  // 需要使用jQuery方法时转换即可，永远是最新的li集合
  $(things).each(function() {
    // 你的业务逻辑
  })
  

可搜索的关键词 #

你可以用以下关键词搜索同类问题：jQuery静态集合更新、动态DOM修改后jQuery对象失效、实时DOM选择器

内容的提问来源于stack exchange，提问作者Jack the man