javascript - 在使用 jquery after() 创建的输入字段上自动完成

Question

我有一个实现自动完成功能的字段。这是我的代码:

<%= f.text_field :auteur_1, size: 100, class:"champs_auteur", data: {autocomplete_source: auteurs_enum_path} %>

这会创建以下 html :

<input size="100" class="champs_auteur ui-autocomplete-input" data-autocomplete-source="/auteurs/enum" name="biblio[auteur_1]" id="biblio_auteur_1" autocomplete="off" type="text">

这是在我的 javascript 中:

$(document).on('ready', function() {
  return $('.champs_auteur').autocomplete({
    source: $('.champs_auteur').data('autocomplete-source')
  });
});

一切正常。我正在使用 jquery after() 和 append() 创建输入字段，如下所示:

$(document).on('ready', function () {
    i = 2 ;
    $(".extra_auteur").click(function(){
        $('.premier_auteur').after('<div class="grid mbm"><div class="one-sixth"><label for="biblio_auteur">Auteur</label></div><input size="100" class="champs_auteur" data-autocomplete-source="/auteurs/enum" type="text" name="biblio[auteur_' + i++ + ']" id="biblio_auteur_1" /></div>');
        });
  });

这是缩小的代码(主要是 html):

<div class="grid mbm">
    <div class="one-sixth">
        <label for="biblio_auteur">Auteur</label>
    </div>
    <input size="100" class="champs_auteur" data-autocomplete-source="/auteurs/enum" type="text" name="biblio[auteur_' + i++ + ']" id="biblio_auteur_1" />
</div>

这确实创建了带有 id="biblio_auteur_2" (以及 3、4 等...)的输入字段。

自动完成功能不适用于其他输入字段。我不明白为什么不。

Answer 1

这是因为您使用元素 #ID 而不是类名，如下所示:

$( "#aut_extra" )

#ID 始终是唯一的，因此仅适用于 1 项。你需要做的是让 jQuery 选择 CSS 元素类而不是 ID。

$( ".aut_extra" ) 

或者任何类名。

但是您必须确保当前具有 aut_extra ID 的元素具有同名的 CSS 类。

<div class="aut_extra"....