如何在动态加载时将焦点添加到 HTML 按钮？

Question

我有一些带有 "Next" 和 "Previous" 按钮的教程动态加载。它们是动态加载的，因为按钮有某种我需要检索的 data-attribute=""，并根据我正在进行的步骤更新为不同的值。

我希望 "Next" 按钮在用户按下 Enter 时变为 "clicked"。当我第一次加载教程时，"Next" 按钮具有 autofocus 属性：

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

这很好用，当我第一次加载按钮时，我可以按 "Enter" 进入下一步。

每个 NextStep() 或 PrevStep() 函数然后用更新的属性重写按钮。 "Next" 按钮再次写有 autofocus。但是，它没有被聚焦，这次按 Enter 无法继续它。

//"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>");

});

如果我不动态重新加载按钮（我可以按住 enter，它会无限增加），我就不会遇到这个问题。

问题： 如何让这个 "Next" 按钮在动态加载时保持焦点，以便我可以使用 Enter键？

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

Answer 1

添加行

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

或

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

更新 HTML 之后。

Updated fiddle

或者，您可以决定根本不更新整个 HTML。把按钮留在那里，只改变它们的属性。

Answer 2

简单使用

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

...或者...

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

...在适当的位置。查看更新后的 jsfiddle.

如何在动态加载时将焦点添加到 HTML 按钮？

How to add focus to an HTML button when loading dynamically?

html

jquery

button

autofocus