動的に生成されるHTMLの「次の入力要素に移動するタブ」はありませんか？

Question

私はボタンをクリックすると、ユーザにより生成されていますいくつかのjavascriptがあります（ページのロード時にそれが存在しない）as_body idはすでに内の別の動的に生成されたJavaScriptウィンドウで

htmlstring = ''+   
'<div class="input_holder">'+ 
'<div class="as_input_holder"><input tabindex="1" class="as_input form-control-small" id="name">'+ 
'<div class="as_input_holder_footer">Name</div>'+ 
'</div>'+ 
'<div class="as_input_holder"><input tabindex="2" class="as_input form-control-small" id="number">'+ 
'<div class="as_input_holder_footer">Number</div>'+ 
'</div>'+ 
'<div class="as_input_holder"><input tabindex="3" class="as_input form-control-small" id="rank">'+ 
'<div class="as_input_holder_footer">Rank</div>'+ 
'</div>'+         
'</div>'; 

$('#as_body').html(htmlstring); 

をし、コードはほぼ完璧に動作しますが、私の人生は入力フィールドから入力フィールドへタブで移動することはできません。私はここで間違って何をしていますか？

Answer 1

私はあなたのtabIndexesを動的に追加するとブラウザがプロパティを認識できないという問題があると思います。私は、動的に生成されたスクリプトからtabindexプロパティを削除することをお勧めします。あなたは「as_input_holder」新たに挿入されたエントリのDOMルックにあなたの「htmlString」を追加すると、それらを反復処理とのtabIndex

var tabIndex = 1; 
$("#as_body").find('.as_input_holder input').each(function(){ 
    $(this).attr('tabIndex', tabIndex); 
    tabIndex++; 
}) 

あなたのJSオブジェクトへのtabIndexを添付します。この方法を追加し、これは理論上で動作するはずです:)。私はそれが単なる提案だとテストしていないが、私はこれがあなたの問題を解決すると思う。

幸運を祈る！