HTML Element not working properly after dynamic insertion

Question

I´m creating a new append html element but it lose the functionality to use on key up. Is there anyway to fix that (I can use ES6 but including more frameworks on this project could be hard since it´s legacy code. I´m with JQuery and JQuery UI)

I tried to read a lot about it but is seems that when you create a HTML element with append the functionality is lost.

            } else if (opcaoSelecionada === 'cidade'){
                    var microtime = Date.now();
                    $('#add_destino').prepend   (`
                        <div class="container" style="margin-top: 50px;">
                        <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6">
                        <div class="form-group">
                        <label>Type a country name</label>
                        <input type="text" name="country" id="country" placeholder="Enter country name" class="form-control">
                        </div>
                        <div id="country_list"></div>
                        </div>
                        <div class="col-lg-3"></div>
                        </div>
                        </div>
                    `);
                }
            }

            $('#country').on('keyup',function() {
                console.log('Teste');
                var query = $(this).val();
                console.log(query)
                $.ajax({
                    url:"http://localhost/autocomplete/cidadeTourCode",
                    type:"GET",
                    data:{'cidade':query},
                    success:function (data) {
                    $('#country_list').html(data);
                    }
                })
            });


            $(document).on('click', 'li', function(){
                var value = $(this).text();
                $('#country').val(value);
                $('#country_list').html("");
            });
´´´