javascript - 动态生成的 HTML 中没有 "tab to move to next input element"？

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 对象上，这在理论上应该可行:)。我没有测试过这只是一个建议，但我认为这会解决您的问题。

祝你好运!