动态插入后HTML元素无法正常工作

Question

我正在创建一个新的append html元素，但是它失去了用于键入的功能。无论如何，有没有要解决的问题（我可以使用ES6，但由于该项目的遗留代码，因此很难在该项目上包含更多框架。我使用JQuery和JQuery UI）

我试图阅读很多有关它的内容，但是似乎当您创建带有附加内容的HTML元素时，功能会丢失。

            } 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("");
            });
´´´