动态添加其他文本输入字段后，jQuery自动完成失败

**更新**我将HTML id改为了类。 并将建议纳入当前的最佳答案。 自动完成function现在可以使用，但自动完成选项列表无法成功显示动态加法文本输入字段。 它虽然适用于原版。

我在下面添加了更新的代码。

我刚刚在我的Rails应用程序中将jQuery UI自动完成添加到表单中。 该function工作正常但是当我动态添加具有相同类的另一个输入字段时它不起作用？

Add ingredient 

动态添加其他字段后，原始字段的自动完成function将继续工作，不会出现任何问题，但新添加的字段的自动完成function不起作用。

如果输入字段全部共享相同的ID，为什么动态添加字段的自动完成function会失败？

的application.js

 $(document).ready(function(){ $(".addNewIngredient").on('click', function(e){ e.preventDefault(); $(".ingredientField").append($("#new_ingredients_form").html()); $(".select_ingredient").autocomplete({ minLength: 2, source: '/ingredients', focus: function(event, ui) { $('.select_ingredient').val(ui.item.name); return false; }, select: function(event, ui) { $('.select_ingredient').val(ui.item.name); $('.link_ingredient_id').val(ui.item.id); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "
" ) .data( "ui-autocomplete-item", item ) .append( "" + item.name + "" ) .appendTo( ul ); }; }); $(".removeIngredient").on('click', function(e){ e.preventDefault(); $(".ingredientField #new_ingredients_form").empty(); }); }); 

new.html.erb

 
Create Meal
   
 
  
 Add ingredient Remove ingredient  
  
   

_ingredient_form.html.erb

   $(function() { // Below is the name of the textfield that will be autocomplete $('.select_ingredient').autocomplete({ // This shows the min length of charcters that must be typed before the autocomplete looks for a match. minLength: 2, // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format. source: '', // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name. focus: function(event, ui) { $('.select_ingredient').val(ui.item.name); return false; }, // Once a value in the drop down list is selected, do the following: select: function(event, ui) { // place the person.given_name value into the textfield called 'select_origin'... $('.select_ingredient').val(ui.item.name); // and place the person.id into the hidden textfield called 'link_origin_id'. $('.link_ingredient_id').val(ui.item.id); return false; } }) // The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, and can be customized. .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "
" ) .data( "item.autocomplete", item ) // For now which just want to show the person.name in the list. .append( "" + item.name + "" ) .appendTo( ul ); }; });  
       

ingredients_controller.rb

 class IngredientsController  ['name LIKE ?', "#{params[:term]}%"]) else @ingredients = Ingredient.all end respond_to do |format| format.html format.json { render :json => @ingredients.to_json } end end end 

Answer 1

通过使用$(document).on("keydown.autocomplete",".select_ingredient",function(e){}修复它

完全修改function：

Answer 2

试试这个：

 $(document).ready(function(){ $("#addNewIngredient").on('click', function(){ e.preventDefault(); $("#ingredientField").append($("#new_ingredients_form").html()); }); $("#removeIngredient").on('click', function(){ e.preventDefault(); $("#ingredientField #new_ingredients_form").empty(); }); }); 

请看这里的第一个答案。

您可以做的其他事情是：在函数中编写jquery代码（比如applyJquery（））并编写href="#" onclick="applyJquery();或者href="javascript:applyJquery();

Jquery通常不能像动态创建的元素那样使用静态元素。

使用.on()参见此处的示例

编辑：写：$（document）.on（“event”，“。class”，function（e）{$（this）.autocomplete（{// write something}）;

Answer 3

它应该是

 $('form').on('click', '#addNewIngredient', function() {... 

但重复的ID是无效的html，所以你应该使用classname而不是id属性，例如

 Add ingredient 

和

 $('form').on('click', '.addNewIngredient', function() {...