移动端Javascript Change事件函数失效问题求助

创建并追加元素的操作不是导致移动端失效的原因——你是在把元素插入DOM之后才获取它并绑定事件，这个流程完全合法，桌面端正常运行也证明了这一点。

移动端select的change事件失效，大概率是部分移动端浏览器（尤其是iOS Safari）对原生select组件的事件触发逻辑有特殊处理：比如部分旧版浏览器需要用户点击「完成」按钮才会触发change事件，或者事件触发存在延迟。

给你几个可行的修复方案：

方案1：改用input事件监听 #

input事件在选项发生变化时会立即触发，兼容性比change更好，能覆盖大部分移动端场景：

const boxWrapper = document.getElementById("top-menu");
const box = document.createElement("li");
box.innerHTML = '<select id="menjajjezik"><option id="hr">HR</option><option id="eng" selected>ENG</option></select>';

boxWrapper.appendChild(box);

const el_option = document.getElementById("menjajjezik");
el_option.addEventListener("input", function() {
  if (this.selectedIndex === 1) {
    window.location.href = 'https://link1.com/';
  } else {
    window.location.href = 'https://link2.com/';
  }
}, false);

方案2：同时绑定change和input事件做兼容 #

为了覆盖更多边缘场景，可以同时绑定两个事件，并加个标记避免重复跳转：

const boxWrapper = document.getElementById("top-menu");
const box = document.createElement("li");
box.innerHTML = '<select id="menjajjezik"><option id="hr">HR</option><option id="eng" selected>ENG</option></select>';

boxWrapper.appendChild(box);

const el_option = document.getElementById("menjajjezik");
let isRedirecting = false;

const handleLanguageSwitch = function() {
  if (isRedirecting) return;
  isRedirecting = true;
  
  if (this.selectedIndex === 1) {
    window.location.href = 'https://link1.com/';
  } else {
    window.location.href = 'https://link2.com/';
  }
};

el_option.addEventListener("change", handleLanguageSwitch, false);
el_option.addEventListener("input", handleLanguageSwitch, false);

额外排查点 #

1. 用Chrome远程调试移动端页面，查看控制台是否有JS报错（比如元素未找到、权限问题等）；
2. 检查CSS是否导致select组件被隐藏、覆盖或者无法交互（比如pointer-events: none）。

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