Jquery Ui自动完成+追加：工作直到重复[重复]答案

【问题标题】：Jquery Ui Autocomplete + Append: Works until repeating [duplicate]Jquery Ui自动完成+追加：工作直到重复[重复]
【发布时间】：2016-11-01 21:48:49
【问题描述】：

通过在这里和其他页面进行大量搜索，我开始编写一些代码，它允许我使用图像和输入重复一个小 div，感谢 Jquery UI，这个甚至可以自动完成。

事实上，或者我应该说的问题是，一切正常，但是当我开始使用输入重复 div 时，重复的那些不会自动完成。

通过在此页面上寻找解决方案，我看到了许多不同且可能的解决方案（例如使用类而不是 ID，将名称或类设为变量，以便每次创建新 ID 时它都保持唯一...）但遗憾的是，在我开始这个实验之前，我从未接触过 Jquery 或 Js，即使我尽力而为，大多数解决方案都不起作用（或者我做错了我无法识别的事情）

自动完成功能：

<body background="images/fondo.png">
<!--SCRIPT PARA AUTOCOMPLETAR-->
<script>    
$(function() {
    $( ".BuscaPersonajes" ).autocomplete({
        source: 'search.php'
    });
});
</script>

从其他人那里复制第一个 div：

            <h4>Personajes Participantes <button type="button" name="add" id="add" class="btn btn-success">Add More</button></h4>
                <div class="col-sm-3" ><center>
                    <img class="NuevoAvatar" src="images/Avatars/Characters/default_avatar.png" width="100" style="border:6px outset silver;">
                    <input type="text" value="" class="form-control BuscaPersonajes" placeholder="Buscar Personajes">
                    </center>
                </div>

最后是附加函数：

<script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<div class="col-sm-3" ><center><img class="NuevoAvatar" src="images/Avatars/Characters/default_avatar.png" width="100" style="border:6px outset silver;"><input type="text" value="" class="form-control BuscaPersonajes" placeholder="Buscar Personajes"></center></div>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });   
 });  
 </script>  
</body>
</html>

正如我所说，我尝试了很多不同的方法，但或者它们不适用于我的项目，或者我无法真正理解如何将特定网络的答案和他的问题带到我的网站和设计。

您如何看待代码及其可能的解决方案？ jquery新手在这里。

【问题讨论】：

标签： javascript jquery-ui input autocomplete append

【解决方案1】：

事件处理程序仅绑定到当前选定的元素； 它们必须在您的代码进行调用时存在。

请参阅对附加的this 问题的回复，然后附加自动完成。

【讨论】：

我几天前尝试过类似的事情，在您回答后我再次尝试，唯一的变化是第一个自动完成功能也停止工作：/

【解决方案2】：

您是否尝试过将自动完成功能重新绑定到您使用 $.append 调用创建的输入？

$('#dynamic_field').append('<div class="col-sm-3" ><center><img class="NuevoAvatar" src="images/Avatars/Characters/default_avatar.png" width="100" style="border:6px outset silver;"><input type="text" value="" class="form-control BuscaPersonajes" placeholder="Buscar Personajes"></center></div>')
 .children('.BuscaPersonajes').autocomplete({source: 'search.php'});

【讨论】：

是的，但似乎什么也没发生。

【解决方案3】：

最后，我得到了它的工作。如果将来有人遇到任何与此相关的问题，请尝试解决它只需将相同的自动完成功能复制到附加功能中即可：

<!--APPEND FUNCTION-->
<script>
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<div class="col-sm-3" ><center><img class="NuevoAvatar" src="images/Avatars/Characters/default_avatar.png" width="100" style="border:6px outset silver;"><input type="text" value="" class="form-control BuscaPersonajes" placeholder="Buscar Personajes"></center></div>');
           <!--AUTOCOMPLETE FUNCTION-->
           $(function() {
                $( ".BuscaPersonajes" ).autocomplete({
                        source: 'search.php'
                });
            });
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });   
 });  
</script>

感谢 Dror 和 etherealite 的帮助 ;)

【讨论】：