Jquery Ui Autocomplete + Append: Works until repeating

Question

By searching a lot around here and other pages, I've get to work a little code which allows me to repeat a little div with an image and an Input, this one being even Autocompleted thanks to Jquery UI.

The fact, or the problem I should say, it's that everything works fine, but when I begin to repeat the divs with the inputs, those which are repeated doesn't get autocompleted.

By looking for solutions on this page, I've seen many different and possible solutions (like using Class and not ID's, making the name or class a variable so it keeps being unique everytime I create a new ID...) But sadly I have never touched Jquery or Js until I begin with this experiments, and even trying to do my best, most of that solutions didn't work (Or I did something wrong that I can't recognize)

Autocomplete function:

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

The first div, from everyone else is copied:

            <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>

And finally, the appending 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>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });   
 });  
 </script>  
</body>
</html>

As I said, I've tried a lor of differents methods, but or they didn't work for my project or I couldn't really understand how to take the answer for the specific web and his question to my website and design.

What do you think about the code and it's possible solutions? jquery newbie here.

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call.

See response to this question that appends and then attach the autocomplete.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 30 '16 at 01:08

Dror

7,255
3
38
44

I tried something like this a few days ago, and I've tried again after your answer, and the only change is that the first Autocomplete stops working too :/ – Darkness Seeker Jun 30 '16 at 07:26

score 0 · Answer 2 · answered Jun 30 '16 at 01:37

Have you tried rebinding the autocomplete to the inputs that you create with your $.append call?

$('#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'});

Yes, but nothing seems to happen. – Darkness Seeker Jun 30 '16 at 07:25 — Darkness Seeker, Jun 30 '16 at 07:25

score 0 · Answer 3 · answered Jun 30 '16 at 08:50

Finally, I got it to work. If someone in the future gets any problem related to this, Try to solve it Just by copyng the same autocomplete function inside the appending one:

<!--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>

My thanks to Dror and etherealite by bothering helping ;)

Jquery Ui Autocomplete + Append: Works until repeating

3 Answers3