javascript - Select2 插件中的第二个多选选项不会触发 Jquery key up 事件

Question

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

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

$(".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 事件不会被触发，并且无法调用 ajax

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

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

以上行清除了选项，但未触发 keyup 事件。

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

Answer 1

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

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

与

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