如何将焦点放在动态创建的jQuery文本框上？

Question

我有一个新产品表格，其中包含为“可用颜色”动态创建的文本框。 我要做的是将精力集中在新的文本框上。 这是我的代码。

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () { 
colorCounter = 2;
sizeCounter = 2;

$("#addColorButton").click(function () {
    if (colorCounter > 10) {
        alert("Only 10 colors allowed");
        return false;
    }
    //This has been edited to show the solution

    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'ColorTextBoxDiv' + colorCounter);
    newTextBoxDiv.after().html('<label>Color #' + colorCounter + ' : </label>' +
        '<input type="text" name="AvailableColor' + colorCounter +
        '" id="colorTextbox' + colorCounter + '" value="" >');
    newTextBoxDiv.appendTo("#ColorTextBoxesGroup"); 
    $('#colorTextbox' + colorCounter).focus();
    colorCounter++;
   });

});
}); 

</script>

<form name="newProductForm" id="newProductForm" action="index.cfm" method="post">
    <div id='ColorTextBoxesGroup'>
        <div id="ColorTextBoxDiv1">
            <label>Color #1 :</label>
            <input type='text' id='colorTextbox1' name="AvailableColor1" />
        </div>
    </div>

    <input type='button' value='Add More Colors' id='addColorButton'>
</form>

第一次单击后，var myTextbox似乎评估为“ colorTextbox2”，但焦点不会移至新创建的文本框。

如果我更改行$（'＃myTextbox'）。focus（）; 到$（'＃colorTextbox2'）。focus（）; 然后将焦点移到新的文本框。 当然，再次单击按钮，焦点将停留在textbox2中。

我肯定会对此有所帮助。 谢谢！

Answer 1

要定位元素，可以将变量连接到字符串选择器中，如下所示：

$('#colorTextbox' + colorCounter).focus();