gpt4 book ai didi

javascript - 动态创建的输入字段的奇怪行为

转载 作者:行者123 更新时间:2023-11-30 17:59:29 26 4
gpt4 key购买 nike

我正在尝试动态创建输入文本字段。使用 jquery 我能够生成输入字段,但是每当用户尝试单击任何动态创建的字段时,他的指针会自动移动到第一个字段。现在,只需使用 TAB 键,他就可以导航到特定字段并输入详细信息。

Here是体验我所面对的 fiddle 。

这是代码

HTML

<head>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
</head>

<body>

<label><div id= "div1"><input class="address" id="friend1" type="text"></div></label>
<div id='wrapper2'><div id="button2" class='removebutton'>Remove</div><div id="button">Add!</div></div>
<div id="submit-button" >GO!</div>
</body>

JS

$(document).ready(function()
{
var friends_cnt = 1;

$('#wrapper2').on('click','#button',function ()
{
clicknum = 0;
if (friends_cnt < 11)
{
$('<div id = div'+(friends_cnt+1)+'><input type="text" class="address" id="friend' + (friends_cnt+1) + '"></div>').insertAfter('#div'+friends_cnt);
$(function() {
$("#friend"+(friends_cnt+1)).autocomplete({
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
});
});
friends_cnt++;
}
else
{

}

});



$('#button2').click(function()
{
clicknum = 0;
if(friends_cnt > 1)
{
$('#friend'+friends_cnt).remove();
$('#div'+friends_cnt).remove();
friends_cnt--;
}

});

});

最佳答案

原因是html问题。我移动了一个 label 关闭标签,如下所示:

  <div id= "div1"><label></label><input  class="address" id="friend1" type="text" /></div> 

现在指针不跳了,看:

http://jsfiddle.net/g84t4/4/

关于javascript - 动态创建的输入字段的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17388223/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com