动态创建的下拉框触发onchange事件调用方法报错如何修复

问题原因 #

• 拼接select的onchange事件时错误直接执行了showMail()：你写的onchange="'+ showMail() +'"会在拼接HTML字符串阶段就立即调用showMail方法，此时对应的DOM元素还没插入页面，自然找不到元素触发报错。正确做法是把showMail()作为字符串写入onchange属性，不要提前执行。
• id属性不符合规范&重复ID问题：首先id不能包含空格，你写的id="contact method"带空格，getElementById根本无法匹配到该元素；其次每次调用addpoc都会生成相同id的元素（fname、lname、one、two、three等），id是页面唯一标识，重复后会导致选择器只能匹配到第一个生成的元素，后续新增的模块操作全部失效。
• el变量未初始化：let el;定义后直接el +=拼接字符串，el初始值为undefined，最终拼接出来的HTML开头会多出undefined字符串，导致DOM结构异常。

修复方案 #

采用相对DOM查找+替换固定ID为类名的方案，可适配多次点击新增多个模块的场景，不会出现互相干扰的问题：

function addpoc() { 
  // 初始化el为空字符串
  let el = '';
  // 移除所有重复的固定id，onchange直接写字符串形式，同时把当前触发元素this作为参数传给方法
  el += '<div class="clearfix"><div class="name"><label>First name:<br><input type="text" name="fname" placeholder="Ricky"></label></div><div class="name"><label>Last name:<br><input type="text" name="lname" placeholder="Ju"></label></div></div><div class="parent" style="width: 100%;"><div class="select-wrap"><select onchange="showMail(this)"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div class="work-mail" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div class="personal-mail" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'
  $('#addelement').append(el);
}

// 接收当前触发的select元素作为参数，用相对查找匹配同模块下的邮箱输入框，不需要依赖全局id
function showMail(selectDom) {
  const parentModule = $(selectDom).closest('.parent');
  if (selectDom.value == "workmail") {
    parentModule.find(".work-mail").show();
    parentModule.find(".personal-mail").hide();
  } else {
    parentModule.find(".personal-mail").show();
    parentModule.find(".work-mail").hide();
  }
}

原有HTML代码不需要调整，直接复用即可。

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