使用jQuery .html()更新后Select2的select2:select事件无法触发

嘿，这个问题我之前也碰到过，核心原因是你通过AJAX动态替换了省份下拉框的DOM元素，原来的事件绑定没跟上新元素！

问题根源 #

你一开始直接给#drp_prov绑定select2:select事件，这种方式只会对页面初始化时就存在的元素生效。当AJAX请求成功后，你用新的HTML替换了#provSelect里的内容，原来的#drp_prov被移除，新生成的下拉框并没有继承之前的事件绑定，所以回调函数自然不会执行。

快速解决方案：改用事件委托 #

把事件绑定到一个页面加载时就存在的父元素上（比如document，或者更接近的容器元素，推荐后者性能更好），让父元素来监听冒泡上来的事件：

// 事件委托写法，绑定到document上（也可以换成下拉框的父容器）
$(document).on('select2:select', '#drp_prov', function (e) {
  let provId = $(this).val();
  console.log(provId); // 现在就能正常输出啦
});

额外优化小技巧 #

为了避免Select2实例的冲突，在AJAX成功回调里初始化新下拉框时，建议先销毁旧的实例：

success: function(data) {
  $('#provSelect').html(data);
  // 先销毁旧实例，再初始化新的Select2
  $('#drp_prov').select2('destroy').select2();
}

同时要确保你的province_select视图生成的#drp_prov结构正确，没有重复ID或者其他DOM语法错误哦。

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