我有一个有输入的表格。用户可以启动类型，JQuery 脚本 (https://jqueryui.com/autocomplete/#multiple( 自动完成用户文本。
用户还可以使用简单的JavaScript createElement和innerHTML函数向表中添加新的输入。
当用户添加新输入时出现问题，因为 JQuery 不会注册新输入，因此它不会将事件处理程序附加到自动完成用户文本。
一个可能有效的解决方案(但我无法让它工作(是 JQuery .delegate(( 函数。
编辑(添加源代码(：
https://jsfiddle.net/j8rz7s1q/7/Can't get the code to format correctly from jsfiddle
来自 http://api.jquery.com/on/
委托事件处理程序具有可以处理的优势 来自添加到文档中的后代元素的事件 后来的时间。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序的需要。
然后，您只需要更改以下示例以匹配您拥有的元素：
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
你需要使用委托事件来处理新添加的元素
像这样：
$(document).on("keydown", "tr input", function() {})
通常，在尚不存在的元素上绑定事件是通过委托处理的，在委托中，绑定父元素并依赖于绑定后创建的任何子元素上的事件，通过冒泡到父元素来工作，然后父元素可以调用回调。
对于 jQuery UI 自动完成插件，它是通过其实现的接口将自动完成应用于元素来实现的，该接口对使用它的元素执行自己的绑定。
在本例中，在添加新的 DOM 元素时，我们定义一个函数来处理在传递给它的任何元素上绑定自动完成功能，并更新创建新元素的代码以在创建后调用该函数以应用自动完成绑定。
对此的工作演示是 https://jsfiddle.net/j8rz7s1q/16 的，并在此处复制：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button onClick="addInputs();" id="button1">Add input</button>
<p>
The first input works. The autocomplete works completely but when you add new inputs the new inputs doesn't register to the event handler.
</p>
<div>
<div class="LightBox-box-content">
<table>
<tbody class="addInput">
<tr>
<td>
<input type="text" class="input1">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(function() {
var availableTags = [
"Yes", "No",
];
function split(val) {
return val.split(/,s*/);
}
function extractLast(term) {
return split(term).pop();
}
window.setupAutocomplete = function($obj) {
return $obj
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("");
return false;
}
});
};
setupAutocomplete($(".input1"));
});
</script>
<script>
function addInputs() {
var div = document.createElement('tr');
div.innerHTML = '<tr>
<td>
<input type="text" class="input1">
</td>
</tr>';
setupAutocomplete($('input', div));
document.getElementsByClassName('addInput')[0].appendChild(div);
}
</script>
</body>
</html>