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

Question

我有一个事件侦听器，它侦听一组单选按钮上的单击，然后将检查后的值传递给函数。

然后，无论何时选择单选按钮，我都会将检查后的值输出到Web控制台，但这仅在页面加载后单击两次单选按钮时有效。

 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 。 基本上，您说的是单击t1q1El时执行“ question_1 。

2）单击1。我们执行question_1 ，该事件正在将点击事件分配给t1qE1 。 现在t1qE1有2个事件。

3）单击2。执行question_1 _1（这将为其自身分配另一个click事件）并执行该click。

仅分配click事件的解决方案很简单：

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

BTW one（）仅执行一次，如果您需要在第一次执行后使用on（）保留事件