如何把重点放在jquery动态创建文本框上

How to put focus on jquery dynamically created textbox?

本文关键字：创建 动态 文本 jquery      更新时间：2023-09-26

我有一个新的产品表单动态创建的文本框为"Available Color"。我要做的是将焦点分配到新文本框上。这是我的代码。

<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。

如果你能帮我这个忙，我会很感激的。谢谢!

要定位元素，您可以像这样将变量连接到字符串选择器中:

$('#colorTextbox' + colorCounter).focus();
相关文章：