如何修改jQuery on(change)函数中的引用ID以切换单选按钮组

我希望通过变量修改脚本中的引用ID，初始时将change事件绑定到#groupOne下的单选按钮，但调用changeGroup()函数把groupId改为#groupTwo后，事件仍仅对#groupOne生效。请问如何修改代码，让事件能作用于另一个div？

原代码示例 #

JavaScript代码

var groupId = "#groupOne input";
var groupValue = 1;
var radioValue;

function changeGroup() {
  groupId = "#groupTwo input";
  groupValue = 2;
}

$(groupId).change(function() {
  $('#x').text("Radio " + radioValue + " says " + groupId);
  $('#y').text(groupValue);
})

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioGroup">
<div id="groupOne">
<input type="radio" name="1" id="1" value="1">
<label for="1">Radio 1</label>
<input type="radio" name="1" id="2" value="2">
<label for="2">Radio 2</label>
<input type="radio" name="1" id="3" value="3">
<label for="3">Radio 3</label>
</div>
<div id="groupTwo">
<input type="radio" name="2" id="4" value="4">
<label for="4">Radio 4</label>
<input type="radio" name="2" id="5" value="5">
<label for="5">Radio 5</label>
<input type="radio" name="2" id="6" value="6">
<label for="6">Radio 6</label>
</div>
</div>
<div>
<input type="button" onclick="changeGroup();" value="Change Group">
</div>
<div id="x"></div>
<div id="y"></div>

注：原HTML中label的for属性存在语法错误，已修正。

问题原因 #

初始执行$(groupId).change(...)时，groupId的值是#groupOne input，事件会直接绑定到该选择器匹配的DOM元素上。后续修改groupId变量只是改变了变量的值，并不会自动把事件重新绑定到新的元素上。另外原代码中radioValue未获取当前选中单选框的值，也需要修正。

解决方案 #

方法1：使用事件委托（推荐）

利用事件冒泡特性，把事件绑定到父容器#radioGroup上，监听所有单选框的change事件，然后根据当前的groupId变量判断是否处理该事件。这种方式无需手动切换绑定，更灵活高效。

修改后的JavaScript代码：

var groupId = "#groupOne input";
var groupValue = 1;

function changeGroup() {
  groupId = "#groupTwo input";
  groupValue = 2;
}

// 绑定事件到父容器，委托处理子元素的change事件
$('#radioGroup').on('change', 'input[type="radio"]', function() {
  // 检查当前触发事件的元素是否属于当前groupId对应的分组
  if ($(this).is(groupId)) {
    var radioValue = $(this).val();
    $('#x').text("Radio " + radioValue + " says " + groupId);
    $('#y').text(groupValue);
  }
});

方法2：切换分组时重新绑定事件

在changeGroup函数中，先解绑旧分组的事件，再给新分组绑定事件。这种方式需要手动管理事件的绑定与解绑。

修改后的JavaScript代码：

var groupId = "#groupOne input";
var groupValue = 1;

// 封装事件处理函数
function handleRadioChange() {
  var radioValue = $(this).val();
  $('#x').text("Radio " + radioValue + " says " + groupId);
  $('#y').text(groupValue);
}

// 初始绑定事件
$(groupId).change(handleRadioChange);

function changeGroup() {
  // 解绑旧分组的事件
  $(groupId).off('change', handleRadioChange);
  // 更新分组ID和值
  groupId = "#groupTwo input";
  groupValue = 2;
  // 绑定新分组的事件
  $(groupId).change(handleRadioChange);
}

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