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

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（在其自身上分配另一个单击事件）并执行该单击。解决方案很简单，只需分配一个点击事件：&nbsp;$(function(){&nbsp; &nbsp; &nbsp; &nbsp; $("#t1q1").one('click',function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var t1q1UserInput = $("input[name=t1q1]:checked").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; questionsData['question_1']['input'] = t1q1UserInput;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; assessPoints('question_1', t1q1UserInput);&nbsp; &nbsp; &nbsp; &nbsp; });});顺便说一句，one()只会执行一次，如果您需要在第一次执行后保留该事件，请使用on()