javascript - getPlace() 为动态添加的文本输入给出 Undefined

Question

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

按回车键时效果很好，但是当我从鼠标中选择mouseclick时，place_changed事件给出了未定义的位置

<强> JS FIDDLE DEMO

<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按键和点击，所以你可以用其他方式来做周围。

1. 动态添加您的输入
2. 将自动完成功能绑定(bind)到您的输入(添加后)

这是代码:

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

这是更新的 fiddle :

JSFiddle demo