jQueryUI自动完成功能仅绑定到第一个元素 [英] jQueryUI Autocomplete Binds to First Element Only

问题描述

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

I have a form that contains a row of inputs. One of those inputs is a jQueryUI autocomplete and each row has a button next to it that clones the row so that additional records can be created. I have the autocomplete set to recognize and bind to the newly created input:

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

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

我发现的是这样的:

1. 第一行的自动填充字段工作正常.
2. 如果我没有在第一行中为该字段输入值，则第二行中的自动完成字段会正常工作.
3. 如果我 在第一行中输入一个值，则第二行中的自动完成字段完全无效.

1. The autocomplete field in the first row works fine.
2. The autocomplete field in the second row works fine if I didn't enter a value for that field in the first row.
3. The autocomplete field in the second row doesn't work at all if I did enter a value in the first row.

最重要的是，如果我首先创建所有行，那么一切都会按预期进行，但这不是预期的用例.大多数人将输入第一个记录，单击添加另一个，输入这些值，单击添加另一个，冲洗，重复.

The bottom line is that, if I create all of the rows first, everything works as expected, but this isn't the expected use case. Most folks will enter the first record, click to add another, enter those values, click to add another, rinse, repeat.

我仍在运行，但是我正在花很多时间，所以我希望有人会知道发生了什么，并能够采用不需要我花几个小时才能解决的解决方案自己的.

I'm still running it down, but I'm burning hours so I'm hoping someone will know what's going on and be able to jump in with a solution that doesn't require hours for me to work out on my own.

推荐答案

在克隆autocomplete输入之后，必须重新执行以下两个附加步骤:

There are two additional steps you must perform after cloning an autocomplete input before re-creating it:

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

1. Remove the aria-haspopup attribute;
2. Remove the autocomplete data.

仅调用autocomplete("destroy")不会，因为某种原因，它会破坏原始输入而不是克隆. jsFiddle 上的工作示例.相关代码如下:

Just calling autocomplete("destroy") won't do, for some reason it destroys the original input instead of the clone. Working example at jsFiddle. Relevant code below:

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

这篇关于jQueryUI自动完成功能仅绑定到第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！