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

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，所以请原谅/纠正任何不好的做法..

标签： javascriptjquery

Answer 1

这是发生的事情：

1）t1q1El.addEventListener("click", question_1);您将功能分配给t1q1El。基本上你是说点击question_1时做t1q1El。

2) 点击 1. 我们question_1将点击事件分配给t1qE1。现在 t1qE1 有 2 个事件。

3）单击 2. 执行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()