Как добавить фокус на кнопку HTML при динамической загрузке?

Question

У меня есть учебник с кнопками «Next» и «Previous», которые загружаются динамически. Они загружаются динамически, потому что у кнопок есть какой-то data-attribute="", которые мне нужно получить и обновлены до другого значения в зависимости от того, на каком этапе я нахожусь.

Я хочу кнопку «Далее», чтобы быть «нажата», когда пользователь нажимает клавишу Enter . Когда я первый загрузить учебник, кнопка «Next» имеет autofocus атрибут:

<button value='1' class='decrementer' 'type='button' >Prev</button> 
<button value='1' class='incrementer' 'type='button' autofocus>Next</button> 

Это прекрасно работает, и я могу нажать «Enter», чтобы перейти к следующему шагу, когда я сначала загрузить кнопки.

Каждая функция NextStep() или PrevStep() затем перезаписывает кнопки с обновленными атрибутами. Кнопка «Далее» снова содержит autofocus. Тем не менее, он не фокусируется и не нажимает Введите на этот раз не работает.

//"NextStep()" function 
$(document).on('click', ".incrementer", function() 
{ 
    var num = $(this).attr("value"); 
    var num = parseInt(num, 10); 
    num = num + 1; 
    $("#display").text(num); 

    $("#button-container").html("<button value='" + num + "' class='decrementer' 'type='button' >Prev</button><button value='" + num + "' class='incrementer' 'type='button' autofocus>Next</button>"); 

}); 

У меня нет этой проблемы, если я не перегрузить кнопки динамически (я могу держать войти, и он будет увеличиваться до бесконечности).

Проблема: Как я могу сделать эту кнопку «Далее» сохранить фокус при загрузке динамически, так что я могу прогрессировать с помощью Введите ключ?

Fiddle:https://jsfiddle.net/L0dvtrcd/6/

Answer 1

Просто используйте

$('#button-container .incrementer').focus(); 

... или ...

$('#button-container .decrementer').focus(); 

... в соответствующих местах. См. Обновленный jsfiddle.

Answer 2

Добавьте строку

$("#button-container button.incrementer").focus(); 

или

$("#button-container button.decrementer").focus(); 

после обновления HTML.

Updated fiddle

В качестве альтернативы, вы можете принять решение не обновлять весь HTML вообще. Просто оставьте кнопки там и измените их атрибуты.