javascript - 如何将 javascript 应用于使用 append() 创建的元素？

Question

我有一个由 append() 出现的表单。表单包含需要用 js 调整的输入（自动完成功能）。就这个：

function addForm() {    
<!-- function code here-->
...
html += '  <table class="form">';
html += '    <tr>';
html += '      <td>Entry product</td>';
html += '      <td><input type="text" name="product" value="" /></td>';
html += '    </tr>';
html += '    <tr>';
html += '    <td>&nbsp;</td>';
html += '    <td><div id="featured-product" class="scrollbox">';
html += '    </div>';
html += '    <input type="hidden" name="featured_product" value="" /></td>';
html += '    </tr>';
html += '  </table>';

$('#form').append(html);

}


$('input[name=\'product\']').autocomplete({
<!-- function code here-->
}

但是自动完成功能不能以这种方式工作。据我了解，这是因为 append(html) 不会将 html 存储到 DOM。它适用于通常的 html 表单，但我不能这样。我需要按照描述创建表单。所以问题是：

如何将 js 应用于不在 DOM 中的元素？
或者我如何使用 js 将这个元素执行到 DOM？
也许我需要使用另一个像 append() 的东西？

谢谢。

Answer 1

把这段代码：

$('input[name=\'product\']').autocomplete({
 <!-- function code here-->
});

在附加 html 的代码之后。问题是当这个绑定被尝试时，DOM 不包含这些元素

您还可以使用该.on功能来应用此功能：

$('input[name=\'product\']').on("autocomplete",function(){
 <!-- function code here-->
});