jQuery first: селектор не работает после запуска функции один раз

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/.

Эта строка сбрасывает содержимое «id1» после каждого события keydown: $('#id1').html(emptyArray);.

Если вы удалите его, он будет работать.