javascript - 在 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);
});

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

}());