Использовать функцию geocomplete после события ajax

Question

У меня есть кнопка, которая добавляет поле ввода, где вы можете ввести адрес. Для адреса я использую плагин geocomplete. Во всех полях ввода, которые не были сгенерированы с помощью ajax, работает геокомплект. Если вход был сгенерирован ajax, это не так.

Это мой код для создания поля ввода:

$('.add-drop').on('click', function(){  
     $.ajax({
         url : '/ajax/get-location-input',
         success : function(data){   
            $('#additional-drop').append(data);
        } 
    }); 
});

Это мой геокомплект код:

$(".get-location").geocomplete({
    details : "form",
    types : ["geocode", "establishment"]
  }).bind("geocode:result", function(event, result){  
      console.log(result);
});

Проблема не в классе. Я пытался сделать что-то вроде $(".get-location").on("geocomplete"... но это не сработало. Любая идея? Спасибо

Answer 1

AJAX является асинхронным (асинхронный JavaScript и XML). Это означает, что он может выполняться после завершения обработки основного кода.

$.ajax({
    url: '/ajax/get-location-input',
    success:function(data){   
        alert(data);
    } 
});

alert('Hi ');

В этом случае, Hi сначала предупредит, потом data, В вашем случае, входные данные могут даже не генерироваться, и поэтому geolocation код их не увидит

Правильный код:

$.ajax({
    url: '$('#additional-drop').append(data);',
    success:function(data){   
        $('#additional-drop').append(data);

        $(".get-location").geocomplete({
            details: "form",
            types: ["geocode", "establishment"]
        });

    } 
});

Запустит код после того, как данные будут получены с сервера

---

Это я рекомендовал способ сделать это:

(function () {

    $.fn.addGeolocation = function () { this.geocomplete({ details: "form", types: ["geocode", "establishment"] }).bind("geocode:result", function(e, a){ console.log(a); }); }

    $.get('/ajax/get-location-input', function (a) {
        $('#additional-drop').append(data);

        $(".get-location").addGeolocation();

    });

    /* You may or may not need this */
    window.onload = function () { $(".get-location").addGeolocation(); }

}());