0

我有一个按钮,可以添加一个输入框,您可以在其中键入地址。对于地址,我使用的是geocomplete 插件。在所有不是用 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"...但没有奏效。任何想法?谢谢

4

1 回答 1

2

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(); }

}());
于 2015-04-28T01:28:44.243 回答