[英]jQuery autocomplete for dynamically created inputs for ajax call
I'm having an issue using jQuery autocomplete with dynamically created inputs (again created with jQuery). 我在使用具有自动创建的输入(再次使用jQuery创建)的jQuery自动完成功能时遇到问题。 I can't get autocomplete to bind to the new inputs.
我无法自动完成绑定到新输入。
<script type="text/javascript">
window.count = 0;
if (!window.console) console = {log: function() {}};
var autocomp_opt = {
width: 300,
max: 10,
delay: 100,
minLength: 1,
autoFocus: true,
cacheLength: 1,
scroll: true,
highlight: false,
source: function(request, response) {
$.ajax({
url: "/test/JSON/PACS8Data",
dataType: "json",
data: request,
success: function( data, textStatus, jqXHR) {
console.log( data);
var items = data;
response(items);
},
error: function(jqXHR, textStatus, errorThrown){
console.log( textStatus);
}
});
},
};
function addme () {
window.count++;
var text = $( "#hiddenDiv" ).html();
text = replaceAll("XXYY", ""+window.count, text);
$( "#appendText" ).append(text);
$('.description', text).autocomplete(autocomp_opt);
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
</script>
<br />
<div id="jsftextAjax" >
<table>
<tr>
<td>
<input id="autoText0" class="description" maxlength="20" />
</td>
<td>
<input id="valueText0" maxlength="20" />
</td>
<td>
<button id="add0" type="button" onclick="addme();">Add</button>
</td>
</tr>
</table>
</div>
<div id="appendText">
</div>
<div id="hiddenDiv" style="display:none;" >
<table>
<tr>
<td>
<input id="autoTextXXYY" class="description" maxlength="20" />
</td>
<td>
<input id="valueTextXXYY" maxlength="20" />
</td>
<td>
<button id="addXXYY" type="button" onclick="addme();">Add</button>
</td>
</tr>
</table>
</div>
I'm aware that the problem is due to the content being created after the page has been loaded but I can't figure out how to get around it. 我知道问题是由于页面加载后创建了内容,但我不知道如何解决它。 I've read several related questions and come across the jQuery live method but I'm still in a jam!
我已经阅读了几个相关的问题,并遇到了jQuery live方法,但是我仍然处于困境中!
Any advice? 有什么建议吗?
$('.description', text).autocomplete(autocomp_opt); <-- You are looking at a string text as the context
You need to work of the elements that were added. 您需要处理添加的元素。
$( "#appendText" )
.append(text)
.find('.description')
.autocomplete(autocomp_opt);
or 要么
var elems = $(text);
$( "#appendText" ).append(elems);
elems.find('.description').autocomplete(autocomp_opt);
Use the following snippet, 使用以下代码段,
Remove text
from $('.description').autocomplete(autocomp_opt);
从
$('.description').autocomplete(autocomp_opt);
删除text
$('.description').autocomplete(autocomp_opt);
function addme () {
window.count++;
var text = $( "#hiddenDiv" ).html();
text = replaceAll("XXYY", ""+window.count, text);
$( "#appendText" ).append(text);
$('.description').autocomplete(autocomp_opt);
}
Note : 注意 :
The autocomplete()
code won't work for 1st set of textbox. autocomplete()
代码不适用于第一组文本框。 for that include $('.description').autocomplete(autocomp_opt);
为此包括
$('.description').autocomplete(autocomp_opt);
in your $(document).ready(...)
在您的
$(document).ready(...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.