事件侦听器仅在第二次单击后正确触发

Question

我有一个事件侦听器，用于侦听对一组单选按钮的点击，然后将选中的值传递给一个函数。I then output the checked value to the web console whenever a radio button is selected, but this only works if the radio button is clicked twice after page load.var t1q1El = document.getElementById("t1q1");function question_1() {  $(function(){    $("#t1q1").one('click',function(){      var t1q1UserInput = $("input[name=t1q1]:checked").val();      questionsData['question_1']['input'] = t1q1UserInput;      assessPoints('question_1', t1q1UserInput);    });  });}t1q1El.addEventListener("click", question_1);<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>在第二次单击时，该值会在单击后立即传递到 Web 控制台。所有连续点击都按预期运行。为什么第一次点击没有触发任何东西？我还在学习 JS 所以请原谅/纠正任何不好的做法..

Answer 1

这是发生的事情：

1)t1q1El.addEventListener("click", question_1);您将一个函数分配给t1q1El。基本上你是说不要question_1时t1q1El点击的。

2) 单击 1。我们这样做question_1是将单击事件分配给t1qE1。现在 t1qE1 有 2 个事件。

3) 单击 2. Doing question_1（在其自身上分配另一个单击事件）并执行该单击。

解决方案很简单，只需分配一个点击事件：

 $(function(){

        $("#t1q1").one('click',function(){

            var t1q1UserInput = $("input[name=t1q1]:checked").val();

            questionsData['question_1']['input'] = t1q1UserInput;

            assessPoints('question_1', t1q1UserInput);

        });

});

顺便说一句，one()只会执行一次，如果您需要在第一次执行后保留该事件，请使用on()