動態生成的HTML中是否沒有“跳至下一個輸入元素的標簽”？

Question

我在用戶單擊按鈕后生成了一些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);

as_body id已經在另一個動態生成的javascript窗口中（因此在頁面加載時不存在），並且代碼幾乎可以正常工作，但是我一生無法從輸入字段切換到輸入字段來工作。 我在這里做錯了什么？

Answer 1

我認為問題在於，當您動態添加tabIndexes時，瀏覽器無法識別該屬性。 我建議從動態生成的腳本中刪除tabindex屬性。 當您將“ htmlString”附加到DOM時，尋找新插入的條目“ as_input_holder”遍歷它們並添加tabIndex

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

這樣，您可以將tabIndex附加到您的JS對象上，這應該在理論上可行：)。 我沒有測試這只是一個建議，但我認為這可以解決您的問題。

祝好運！