更新脚本以针对具有递增 ID 的新创建的表行运行

Posted 2023-05-09

【中文标题】更新脚本以针对具有递增 ID 的新创建的表行运行

【英文标题】：Updating script to run for newly created table rows with incremented IDs

【发布时间】：2012-08-11 22:22:30

【问题描述】：

我有一个带有 jQ​​uery UI 提前输入功能的表格。当只有 1 个表格行（初始视图）时，它正在使用我的表单。有一个按钮允许用户根据需要创建额外的表格行，这也增加了文本输入和选择菜单的 ID。

还有另一个脚本可以根据预先输入的选择将匹配值插入到选择菜单中。这两个都适用于第一行，但对于创建的任何其他行停止工作。

我已经设置了一个示例 JSFiddle：

http://jsfiddle.net/fmdataweb/hxzME/1/

我想我理解为什么它们只适用于第一行 - 它们与以下 ID 相关联：#lastYearSelect1 和 #nextYearSelect1 - 但我不确定如何更改它们，因此它们随后可以使用 #lastYearSelect2、#nextYearSelect2、 #lastYearSelect3、#nextYearSelect3 等等。

【问题讨论】：

您将不得不在新创建的输入上初始化 autocomplete。

谢谢@AndrewWhitaker - 你能帮我准确的语法，因为我在正确的位置添加自动完成时遇到问题。到目前为止，我所有的尝试都破坏了脚本。

【参考方案1】：

脚本有一些问题。

首先你是对的，你需要在克隆行后重新设置所有脚手架，clone 方法不会复制功能，只会复制 html 元素。

要找到正确的元素，您可以在 clone 对象上使用匹配属性名称开头的 JQuery ^= 选择器来找到正确的子输入以变成自动完成字段。您可以在函数中执行相同的技巧将下拉菜单更改为正确的函数。

最后，您的许多代码和变量都位于错误的范围内，无法正确访问。我已经移动了很多变量，以便它们可以访问，主要是在全局范围内。当您更有经验时，您不会想这样做，但现在这很好。

我还创建了一个新函数setDropDown，但这段代码几乎与之前的相同。

这是您的代码的工作版本：

http://jsfiddle.net/hxzME/3/

【讨论】：

@user982124 我再次快速查看了代码，我注意到如果根据服务器端代码添加超过 10 行代码，也会出现一个小错误。如果你想知道修复，我很乐意添加它，除非你自己已经发现它。

我还没有发现这个错误 - 如果你能添加修复程序，我将不胜感激，因为我不确定问题是什么。谢谢

【参考方案2】：

向元素添加类并在绑定事件处理程序时使用类选择器。