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

2）单击1。我们执行question_1，这是向t1qE1分配点击事件。现在t1qE1有2个事件。

3）单击2.执行question_1（这将为其自身分配另一个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()

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

1 个答案: