on.click绑定仅生效一次：点击select选项仅首次响应

你遇到的核心问题其实是option元素的click事件兼容性不佳——很多浏览器里，select控件展开后，只有第一次点击option会触发click事件，后续切换选项时这个事件不会再触发，这也是你尝试阻止冒泡、解绑事件都没用的原因。

我们换个更可靠的思路，用select控件的change事件来替代option的click事件，这个事件是标准事件，只要选中的选项发生变化就会稳定触发，完美适配你的需求。

修改后的代码 #

$(document).on('change', 'select', function() {
  // 获取当前选中的option元素
  const selectedOption = $(this).find('option:selected');
  
  // 只处理带有.opdate类的目标选项
  if (selectedOption.hasClass('opdate')) {
    const num_dates = "<?php echo $num_dates_2; ?>";
    const text = selectedOption.attr("id").replace("op", "");
    const [position, num_row] = text.split('*'); // 用解构赋值简化变量获取

    if (num_dates !== position) {
      $('#concatenate_div_final').removeAttr('style'); // 移除样式比设为空字符串更规范
      // 注意：修改id后原选择器会失效，建议给元素加固定类名优化后续操作
      $('#concatenate_final').attr('id', `concatenate_final${num_row}`);
    } else {
      $('#concatenate_div_final').css('display', 'none'); // 用css方法更直观易维护
    }
  }
});

关键改进点说明 #

1. 事件绑定切换：从绑定.opdate的click事件，改成绑定select的change事件，彻底规避option click的浏览器兼容性问题。
2. 目标选项过滤：在change事件里先确认选中的option带有.opdate类，确保只处理你需要的选项逻辑。
3. 代码细节优化：用解构赋值简化split后的变量提取，用removeAttr和css方法替代直接修改style属性，代码更规范易读。

额外注意事项 #

你原来的代码里修改了#concatenate_final的id，这会导致后续如果还有逻辑需要操作这个元素，用原id选择器会找不到它。建议给这个元素添加一个固定的类名（比如concatenate-content），之后用类选择器定位：

<!-- 给目标元素添加固定类名 -->
<div id="concatenate_final" class="concatenate-content">...</div>

// 修改id时通过类选择器定位元素
$('.concatenate-content').attr('id', `concatenate_final${num_row}`);

这样调整后，不管用户点击多少次带.opdate类的option，事件都会正常触发并执行你的逻辑。

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