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

【问题标题】：How to apply javascript to element created with append()?如何将 javascript 应用于使用 append() 创建的元素？
【发布时间】：2012-10-06 20:51:03
【问题描述】：

我有一个由 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() 的东西？

谢谢。

【问题讨论】：

标签： javascript jquery dom append element

【解决方案1】：

输入这段代码：

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

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

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

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

【讨论】：