jQuery添加动态select标签后如何触发change事件展示对应内容

问题原因 #

• 事件绑定逻辑不支持动态元素：原有代码仅为页面加载完成时已存在的.handicap元素绑定了change事件，后续通过点击新增的select元素不会触发该绑定事件
• ID重复冲突：ID属性在HTML页面中具有唯一性，原有代码动态生成元素时重复使用id="ahh"，导致选择器永远只能匹配到页面中第一个#ahh元素，无法对应每个select所属的内容区域

修复方案 #

核心改动点 #

1. 将静态、动态生成的内容区域id="ahh"统一替换为class="ahh"，避免ID重复
2. 改用事件委托方式绑定change事件，可同时适配页面初始存在和后续动态新增的select元素
3. 匹配内容区域时使用$(this).next('.ahh')，精准定位当前select对应的内容块，避免多个组之间互相干扰

完整修复代码 #

<div id="ugh">
<select class="handicap">
<option value="a"> Example 1</option>
<option value="b"> Example 2</option>
</select>
<div class="ahh">
<div class="row">
<div class="inputs">
</div>
</div>
</div>
</div>
<a id="sigepapa" class="fa fa-clone"></a>

<script>
$('#sigepapa').click(function(){
var ako ='';

ako += '<select class="handicap">';
ako += '<option value="a">Example 1</option>';
ako += '<option value="b"> Example 2</option>';
ako += '</select>';

ako += '<div class="ahh">';
ako += '<div class="row">';
ako += '<div class="inputs">';
ako += '</div>';
ako += '</div>';
ako += '</div>';

$('#ugh').append(ako);
});
</script>

<script>
$(document).ready(function()
{
 // 事件委托绑定，所有.handicap元素（含动态新增）都可触发change事件
 $(document).on('change', '.handicap', function()
 {
  var val = $(this).val();
  // 获取当前select对应的内容容器
  var targetContainer = $(this).next('.ahh');

  if(val == 'a')
  { 
   targetContainer.html('<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>');
  }
  else 
  {
   targetContainer.html('<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>')
  }
 });
});
</script>

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