单选按钮事件监听器首次点击无响应，二次点击才正常触发的问题

为什么首次点击没反应？ #

核心原因是你的事件绑定逻辑层级冗余且时机不对：
你给#t1q1这个<fieldset>绑定了原生click事件监听器，第一次点击时才会执行question_1函数。而question_1内部又用$(function(){...})（jQuery的DOM就绪回调）包裹了one('click')事件绑定——但页面加载完成后这个DOM就绪回调已经触发过了，第一次点击时它只是完成了内部one('click')事件的绑定，并没有执行你想要的业务逻辑。等到第二次点击，这个刚绑定的one('click')事件才会触发，所以你看到后续点击正常，首次无响应。

不良写法指正 #

1. 混合原生JS与jQuery事件绑定：一会儿用addEventListener，一会儿用jQuery的事件方法，逻辑混乱且没必要，尽量保持风格统一。
2. 多余的DOM就绪包裹：question_1里的$(function(){...})完全没用，页面加载完成后这个回调不会再触发，放在点击事件里纯属画蛇添足。
3. 事件绑定层级冗余：给同一个元素先绑定一层点击事件，再在里面绑定第二层一次性点击事件，导致首次点击只做了“绑定事件”这件事，没执行核心逻辑。

修正后的代码方案 #

方案一：用jQuery实现（推荐，符合你已引入jQuery的场景） #

直接在页面就绪后绑定一次性事件，逻辑更清晰：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
 <fieldset id="t1q1">
  <label>Strongly Agree <input type="radio" value="strongly-agree" name="t1q1"></label>
  <label>Agree <input type="radio" value="agree" name="t1q1"></label>
  <label>No Stance <input type="radio" value="no-stance" name="t1q1"></label>
  <label>Disagree <input type="radio" value="disagree" name="t1q1"></label>
 </fieldset>
</form>
<script>
// 页面就绪后初始化
$(function() {
  // 给fieldset绑定一次性点击事件
  $("#t1q1").one('click', function() {
    var t1q1UserInput = $("input[name=t1q1]:checked").val();
    questionsData['question_1']['input'] = t1q1UserInput;
    assessPoints('question_1', t1q1UserInput);
    console.log('选中值:', t1q1UserInput); // 控制台输出验证
  });
});

// 假设你已定义的全局变量和函数
var questionsData = { question_1: {} };
function assessPoints(questionKey, input) {
  console.log('评估得分:', questionKey, input);
}
</script>

方案二：原生JS实现一次性事件 #

如果想坚持用原生JS，通过移除监听器实现一次性触发：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
 <fieldset id="t1q1">
  <label>Strongly Agree <input type="radio" value="strongly-agree" name="t1q1"></label>
  <label>Agree <input type="radio" value="agree" name="t1q1"></label>
  <label>No Stance <input type="radio" value="no-stance" name="t1q1"></label>
  <label>Disagree <input type="radio" value="disagree" name="t1q1"></label>
 </fieldset>
</form>
<script>
var t1q1El = document.getElementById("t1q1");
var questionsData = { question_1: {} };

function assessPoints(questionKey, input) {
  console.log('评估得分:', questionKey, input);
}

function question_1() {
  // 获取选中的单选按钮值
  var selectedRadio = document.querySelector("input[name=t1q1]:checked");
  if (!selectedRadio) return; // 避免点击空白区域报错
  var t1q1UserInput = selectedRadio.value;
  
  questionsData['question_1']['input'] = t1q1UserInput;
  assessPoints('question_1', t1q1UserInput);
  
  // 执行完逻辑后移除监听器，实现一次性触发
  t1q1El.removeEventListener("click", question_1);
}

t1q1El.addEventListener("click", question_1);
</script>

额外优化建议 #

建议给单选按钮绑定change事件，而非给<fieldset>绑定click事件：这样只会在单选按钮选中状态变化时触发，避免点击<fieldset>空白区域误触发事件，逻辑更精准：

$(function() {
  $("input[name=t1q1]").one('change', function() {
    var t1q1UserInput = $(this).val();
    questionsData['question_1']['input'] = t1q1UserInput;
    assessPoints('question_1', t1q1UserInput);
  });
});

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