【问题标题】：Click event doesn't work on appended rows in google Place Autocomplete API点击事件不适用于 google Place Autocomplete API 中的附加行
【发布时间】：2019-02-16 17:25:30
【问题描述】：

我正在使用 Google Place Autocomplete API 来搜索输入中的城市，并使用 jquery 自动完成来搜索我的数据库并查看我存储在其中的酒店。

如您所见，酒店有房子的图标。

事实上，我已经设法执行了这个联合搜索，但是当我点击其中一家酒店时，它什么也没做。下拉框消失，无法采集点击事件。另一方面，如果我点击任何谷歌自动完成的目的地，它就会正常工作。我把我的代码留在这里：

HTML：

<input id="accommodation-name" type="text" class="textfield form-control" placeholder="Indica un destino, alojamiento…" />

Jquery 自动完成：

$("#accommodation-name").autocomplete({
        delay: 300,
        source: "url/to/ajax/autocomplete",
        response: function( event, ui ) { // cada vez que se escribe una letra
            // Elimino los valores antes de insertas los nuevos
            $(".pac-container #areasearch").each(function(){
                $(this).remove();
            });
            // Inserto los nuevos valores
            for (var i = 0; i < ui.content.length; i++) {
                if(ui.content[i].type == "acom"){
                    var inner_html = '<div id="areasearch" class="pac-item" onclick="setAccommodation(\''+ui.content[i].title+'\')"><span class="glyphicon glyphicon-home"></span><span class="pac-item-query"><b>'+ui.content[i].title+'</b></span> <span>'+ui.content[i].town+'</span></div>';
                    $(".pac-container").prepend(inner_html);        
                }
            }
        }
    });

Google 地方自动填充功能：

function initialize() {
         var options = {
          types: ['geocode'],
          componentRestrictions: {country: "es"}
         };
        var input = document.getElementById('accommodation-name');
        var autocomplete = new google.maps.places.Autocomplete(input, options);options);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

我创建了一个名为 setAccommodation() 的函数，尽管将它放在“onclick”属性中，但它并没有执行：

function setAccommodation(name){
    console.log(name);
    $("#accommodation-name").val(name);
}

还有一个点击事件：

$("pac-container div").click(function(){
    alert(123);
});

有了这一切，当您单击我包含在“pac-container”列表中的其中一个住宿时，绝对没有任何反应。自动完成关闭，函数和点击事件都不执行。

最后，我留下一个我在控制器中进行 ajax 调用时收到的数据示例，该控制器接收住宿：

[
    {
        "type":"acom",
        "id":3,
        "title":"Don Claudio",
        "town":"Bilbao, Bizkaia",
        "lat":"43.27779",
        "long":"-2.97325",
        "url":"pensiondonclaudio",
        "category":"Alojamiento",
    },
    {
        "type":"acom",
        "id":20,
        "title":"Udondo",
        "town":"Derio, Bizkaia",
        "lat":"43.2921316",
        "long":"-2.888667899999973",
        "url":"hostal-udondo",
        "category":"Alojamiento",
    }
]

已解决

解决方案

最后它比看起来更容易：更改属性就足够了 * onclick = "setAccommodation (\" '+ ui.content [i] .title +' \ ') "* by * onmousedown =" setAccommodation (\"' + ui.content [i] 。 title + '\') "* 因为通过这种方式，onmousedown 是在 google 脚本关闭结果所在的下拉列表之前执行的。

【问题讨论】：

请将您的解决方案转移到自己的答案中，谢谢。

标签： javascript jquery autocomplete google-places-api jquery-ui-autocomplete

【解决方案1】：

解决方案

最终它比看起来更容易：更改属性就足够了 * onclick = "setAccommodation (\" '+ ui.content [i] .title +' \ ') "* by * onmousedown =" setAccommodation (\"' + ui.content [i] .title + '\') "* 因为这样，onmousedown 是在 google 脚本关闭结果所在的下拉列表之前执行的。

【讨论】：