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（）; to $（'＃colorTextbox2'）。focus（）;然后焦点移动到新的文本框。当然还有另一个按钮点击，焦点保留在textbox2中。

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

Answer 1

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

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

如何把重点放在jquery动态创建的文本框中？

1 个答案: