在 Select2 插件中的第二个多选选项上不会触发 Jquery 按键事件

Question

我在 select2 插件中遇到了第二个多重选项的问题，每次我需要根据用户输入的文本更改选项列表

当我第一次在称为 keyup 事件的多选字段中输入文本然后调用 ajax 函数与选项列表绑定时，一切正常

$(".select2").on('keyup', function (e) {

    var city = $("#add_city option:selected").text();
    var location = $(".select2-search__field").val();

    var url = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyCNHGRJsM3uwGUm5gYLGsVrPNyRdeWgYDY&components=country:in&input='+ city +''+ location +'';
    var data ={"url":url};
    console.log(url);
    //return false;
     $.ajax({
    url: 'webservice.php',
    type: 'POST',
    dataType:'JSON',
    contentType: "application/json; charset=utf-8",
    data:JSON.stringify(data),
    success: function (response) {
        //alert(response);
        console.log(JSON.stringify(response));
        for(var i in response)
        {
            $("#add_area").append("<option value=\"" + response[i] + "\">" + response[i] + "</option>");
        }}
    ,error: function(xhr, status, error) {}});

但是当我第二次尝试在字段 keyup 中输入文本时，keyup 事件没有被触发并且无法调用 ajax

我在文档中看到了解决方案，当用户选择选项时我们需要刷新选项列表，然后我正在执行以下行

$('#add_area').select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});

上面的行清除了选项，但没有触发 keyup 事件。

请帮助我如何解决这个问题。

Answer 1

试试这个：您正在刷新列表并因此创建新元素，因此之前绑定的 keyup 事件处理程序将不起作用
替换下面的代码

$(".select2").on('keyup', function (e) {

与

$(document).on('keyup',".select2", function (e) {