事件偵聽器僅在第二次單擊后才能正確觸發

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（）保留事件