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

Posted 2023-05-09

【中文标题】如何将 javascript 应用于使用 append() 创建的元素？

【英文标题】：How to apply javascript to element created with 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() 的东西？ 谢谢。

【参考方案1】：

输入这段代码：

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

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

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

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