如何在動態加載時將焦點添加到HTML按鈕？

我有一些教程與「下一步」和「以前」按鈕，動態加載。它們是動態加載的，因爲這些按鈕有我需要檢索的某種data-attribute=""，並根據我所處的步驟更新爲不同的值。如何在動態加載時將焦點添加到HTML按鈕？

我想要當用戶按下時輸入「下一步」按鈕被「點擊」。當我第一次加載教程，「下一步」按鈕具有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寫入。然而，它並沒有被集中和按輸入這次沒有工作進展。

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

});

我沒有這個問題，如果我不動態地重新加載按鈕（我可以保持輸入，它將無限增加）。

問題：我怎樣才能讓這個「下一步」按鈕保留焦點動態加載，這樣我可以使用輸入關鍵進展是什麼時候？

小提琴：https://jsfiddle.net/L0dvtrcd/6/

來源

2015-07-21 AlbatrossCafe

只需使用

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

......或者......

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

...在合適的位置。請參閱更新的jsfiddle。

來源

2015-07-21 17:54:02 jmar777

添加行

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

或

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

您更新HTML後。

Updated fiddle

或者，你可以決定根本不更新整個HTML。只需將按鈕留在那裏，只需更改其屬性即可。

來源

2015-07-21 17:53:53 GolezTrol

嗯...不知道爲什麼我沒有想到那個大聲笑。比重寫所有東西更容易。哦，謝謝！ – AlbatrossCafe

如何在動態加載時將焦點添加到HTML按鈕？

回答

相關問題