在 ajax 事件后使用 geocomplete 函数

Question

我有一个按钮可以添加一个输入框，您可以在其中键入地址。对于地址，我使用 geocomplete plugin。在所有未使用 ajax 生成的输入框中，geocomplete 有效。如果输入是由 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);
});

问题不在于 class。我试图做类似 $(".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(); }

}());

在 ajax 事件后使用 geocomplete 函数

Use geocomplete function after ajax event

javascript

ajax

jquery

geocoding

geocomplete