Question

我在点击和输入更改事件上动态添加了一个文本输入我需要获取google api getPlace（）值。

在输入键击时，此功能正常，但当我从鼠标 mouseclick中选择时，place_changed事件将显示为未定义

<div id="clkDIv">CLICK ME</div>
<br>
<div id="contentDiv"></div>

var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631));
    $("#clkDIv").on('click', function () {
        var txtEl = "<input id='txtDynamic'  type='text' />";
        $("#contentDiv").append(txtEl);
    });

    $("#contentDiv").on('input', '#txtDynamic', function () {
        $myInput = $(this);
        var options = {
            bounds: defaultBounds,
            types: ['geocode']
        };
        autocomplete = new google.maps.places.Autocomplete($myInput.get(0), options);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            console.log(place);
        });
    });

Answer 1

自动填充place_changed事件监听器已经负责监听Enter按键和点击，因此您可以反过来这样做。

动态添加输入
将自动填充功能绑定到您的输入（添加后）

以下是代码：

$(document).ready(function () {

    $("#clkDIv").on('click', function () {
        var txtEl = "<input id='txtDynamic'  type='text' />";
        $("#contentDiv").append(txtEl);

        bindAutocomplete();
    });
});

function bindAutocomplete() {

    var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631));

    var options = {
        bounds: defaultBounds,
        types: ['geocode']
    };

    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtDynamic'), options);

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        console.log(place);
    });
}

这是更新的小提琴：

JSFiddle demo

getPlace（）为动态添加的文本输入提供Undefined

1 个答案: