getPlace() 为动态添加的文本输入提供未定义答案

【问题标题】：getPlace() gives Undefined for dynamically added text inputgetPlace() 为动态添加的文本输入提供未定义
【发布时间】：2015-01-10 07:42:52
【问题描述】：

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

按回车键这工作正常，但当我从 mouse 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);
        });
    });

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 google-places-api

【解决方案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

【讨论】：