Jquery Ui自动完成+追加:工作直到重复

Jquery Ui Autocomplete + Append: Works until repeating

本文关键字：工作 追加 Ui Jquery      更新时间：2023-09-26

通过在这里和其他页面搜索很多，我已经开始工作一个小代码，它允许我重复一个小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新手在这里

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

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

您是否尝试将自动完成重新绑定到您使用$.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'});

最后，我让它工作了。如果将来有人遇到与此相关的任何问题，请尝试通过在附加的:

中复制相同的自动完成函数来解决它。
<!--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的帮助;)

相关文章：