jQuery優先：功能運行一次後選擇器不工作

Question

當按鍵功能第一次運行時，它執行我期望的功能，並將第一個類更改爲addBack。之後的每個按鍵都不起作用。下面顯示的HTML是1按鍵後。

HTML：

<h1 id="id1"> 
    <span class="addBack">H</span> 
    <span class="noBack">E</span> 
    <span class="noBack">L</span> 
    <span class="noBack">L</span> 
    <span class="noBack">O</span> 
</h1> 

的jQuery：

inputBox.keydown(function() { 
    $("span.noBack:first").removeClass("noBack").addClass("addBack"); 
    }); 

Answer 1

原來的答覆

似乎爲我工作得很好：

$('#inputBox').keydown(function() { 
 
    $("span.noBack:first").removeClass("noBack").addClass("addBack"); 
 
    });

.addBack { color: green; } 
 
.noBack {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 id="id1"> 
 
    <span class="addBack">H</span> 
 
    <span class="noBack">E</span> 
 
    <span class="noBack">L</span> 
 
    <span class="noBack">L</span> 
 
    <span class="noBack">O</span> 
 
</h1> 
 
    
 
<input id="inputBox" type="text" />

除了添加類以外還有其他改變嗎？像改變輸入（事件）或重新創建DOM元素，以便事件丟失？

編輯答案 - 更多似乎發生了什麼導致了問題。

原裝小提琴（從下面的評論問題）：https://jsfiddle.net/HYUTS/y0jd2zxr/5/。

固定小提琴：https://jsfiddle.net/y0jd2zxr/7/。

此行在每次keydown事件後重置'id1'的內容： $('#id1').html(emptyArray);。

如果你刪除它的工作。