使用新的表格行键入 Ahead Breaks

Posted 2023-05-09

【中文标题】使用新的表格行键入 Ahead Breaks

【英文标题】：Type Ahead Breaks with new Table Rows

【发布时间】：2012-08-11 09:25:41

【问题描述】：

我有一张带有 jQ​​uery UI 提前输入功能的表格。当只有 1 个表格行（初始视图）时，它正在使用我的表单。有一个按钮允许用户根据需要创建额外的表格行，但对于任何额外的表格行，提前输入功能不再起作用。

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

http://jsfiddle.net/fmdataweb/9REgZ/1/

如果您开始在第一个字段 - 活动类型 - 中输入内容，您应该开始获得可以选择的匹配词列表（风险选择菜单也会根据输入的活动自动输入）。预输入列表和自动选择都适用于第一行，但是当您单击“新行”按钮时，它们会停止对任何新创建的行起作用。

如果有人能指出什么是破坏以及如何解决它，我很感激 - 我在这个阶段是 javascript 的新手。

【参考方案1】：

Here's something 助你前进。当您创建一个新行时，您必须调用autocomplete() 方法来初始化该字段。

以下是一些相关代码：

$( '#nextYear' ).on( 'click', '#button2', function () 
    var row = $( this ).closest( 'tr' );

    row = row.clone().insertAfter( row );

    row.find( 'input[name="activity"]' ).val( '' ).attr(

      'id', "nextYearSelect" + ( row.index() + 1 )

    ).autocomplete(
        source: availableTags
    );    

);

确保您不会在不同元素上出现重复的 id 属性值。

【讨论】：

感谢 JMM - 我正在努力增加 ID 号，以免重复，然后看看我如何使用您的建议。非常感谢。

谢谢。不确定您是否注意到，但我包含了一些递增代码（请参阅row.index() + 1 部分）。如果您不特别关心数字是什么并且不会删除行以及添加它们，那可能就足够了。当然，还有其他方法可以解决问题，如您发布的新问题中所述。