jquery-ui - jQueryUI 自动完成仅绑定到第一个元素

Question

我有一个包含一行输入的表单。其中一个输入是 jQueryUI 自动完成，每行旁边都有一个按钮，用于克隆该行，以便可以创建其他记录。我有自动完成设置来识别并绑定到新创建的输入：

$( '.input .my-field' ).on( 'focus', function() {
  var $this = $( this );

  $this.autocomplete({ ... });
});

我发现的是：

1. 第一行中的自动完成字段工作正常。
2. 如果我没有在第一行中为该字段输入值，则第二行中的自动完成字段可以正常工作。
3. 如果我确实在第一行中输入了一个值，那么第二行中的自动完成字段根本不起作用。

底线是，如果我首先创建所有行，一切都会按预期工作，但这不是预期的用例。大多数人会输入第一条记录，单击添加另一个，输入这些值，单击添加另一个，冲洗，重复。

我仍然在运行它，但我正在浪费时间，所以我希望有人会知道发生了什么，并且能够加入一个不需要我自己工作几个小时的解决方案。

Answer 1

autocomplete在克隆输入之后，在重新创建输入之前，您必须执行两个额外的步骤：

1. 移除aria-haspopup属性；
2. 删除autocomplete数据。

只是调用autocomplete("destroy")是行不通的，由于某种原因，它会破坏原始输入而不是克隆。jsFiddle的工作示例。相关代码如下：

var clone = $(...)
    .clone(true)
    .removeAttr("aria-haspopup")
    .data("autocomplete",null);