Question

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

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

通过在此页面上查找解决方案，我已经看到了许多不同的和可能的解决方案（例如使用Class而不是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新手在这里。

Answer 1

事件处理程序仅绑定到当前选定的元素; 在您的代码拨打电话时必须存在。

查看对附加的this问题的回复，然后附加自动填充功能。

Answer 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'});

Answer 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通过打扰帮助;）

Jquery Ui自动完成+附加：一直工作直到重复

3 个答案: