单击事件不适用于 google 中的附加行 Place Autocomplete API

Question

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

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

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

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 脚本关闭结果所在的下拉列表之前执行的。

Answer 1

解决方案

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

单击事件不适用于 google 中的附加行 Place Autocomplete API

Click event doesn't work on appended rows in google Place Autocomplete API

javascript

jquery

autocomplete

jquery-ui-autocomplete

google-places-api

已解决