Safari报错TypeError: undefined is not an object 技术求助（动态填充select）

这个错误的核心原因很明确：你代码里尝试调用.replace()的对象是undefined——要么是$('#related .expansion')没有找到对应的DOM元素，要么是找到的元素没有设置data-handle属性，导致.data('handle')返回undefined，自然无法执行replace方法。

下面是针对性的解决步骤和优化后的代码：

1. 先确认元素与属性的存在性 #

在执行任何链式操作前，先检查目标元素是否存在，以及data-handle属性是否有效：

function expansieRubberSelect(){
  // 先获取目标元素
  const $expansion = $('#related .expansion');
  
  // 检查元素是否存在，且data-handle属性不为空
  if (!$expansion.length || !$expansion.data('handle')) {
    console.warn('无法找到目标元素或data-handle属性缺失');
    return; // 提前终止函数，避免后续报错
  }
  
  // 安全执行后续逻辑
  var url = $expansion.data('handle').replace('.html', '.ajax');
  $.getJSON(url, function(data){
    var select = '';
    $.each(data, function(key, value) {
      // 这里补充你的option拼接逻辑，比如：
      select += `<option value="${key}">${value}</option>`;
    });
    // 将生成的select内容插入到目标位置，示例：
    // $('#your-select-element').html(select);
  })
  // 增加错误处理，方便排查JSON加载问题
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('加载JSON数据失败:', textStatus, errorThrown);
  });
}

2. 排查动态元素的加载时机 #

如果.expansion元素是通过AJAX、动态渲染等方式后添加到页面的，那你的函数可能在元素还未被渲染到DOM时就执行了。这种情况下：

• 确保函数在元素加载完成后再调用（比如放在AJAX的成功回调里）
• 或者使用事件委托监听元素的加载（比如利用DOMContentLoaded或自定义事件）
• 如果使用jQuery，可以考虑把函数放在$(document).ready()中，确保DOM完全加载后再执行

3. 兼容旧版Safari的可选方案 #

如果你需要兼容Safari 14.1之前的版本（不支持ES2020的可选链操作符），上面的条件判断是最稳妥的方式；如果可以兼容新版本，也可以用可选链简化代码：

// 可选链操作符会在前面的值为undefined/null时直接返回undefined，避免报错
var url = $('#related .expansion').data('handle')?.replace('.html', '.ajax');
if (!url) {
  console.warn('无法生成有效的请求URL');
  return;
}

快速排查技巧 #

在Safari开发者工具中：

• 打开「Elements」面板，搜索#related .expansion，确认元素是否存在
• 选中该元素，查看右侧「Attributes」面板，确认data-handle属性是否存在且有有效值
• 在「Console」面板中执行$('#related .expansion').data('handle')，直接查看返回值，快速定位问题

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