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

Question

I'm using the Google Place Autocomplete API to search for cities in an input and I used jquery autocomplete to search my database and check out the hotels I have stored in it.

As you can see, hotels have the icon of a house.

The fact is that I have managed to carry out this joint search but when I click on one of the hotels, it does not do anything. The drop-down disappears and there is no way to collect the click event. On the other hand, if I click on any of the destinations that google autocomplete, it works correctly. I leave my code here:

HTML:

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

Jquery Autocomplete:

$("#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 Place Autocomplete:

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); 

I have created a function called setAccommodation (), which is not executed despite putting it in the "onclick" attribute:

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

And a click event:

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

With all this, when you click on one of the accommodations that I have included in the "pac-container" list, absolutely nothing happens. The autocomplete is closed and neither the function nor the click event is executed.

To finish I leave an example of the data I receive when making the ajax call that I have in my controller, which receives the accommodations:

[
    {
        "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",
    }
]

---

Solved

Solution

In the end it was easier than it seemed: It was enough to change the attribute * onclick = "setAccommodation (\" '+ ui.content [i] .title +' \ ') "* by * onmousedown =" setAccommodation (\ "' + ui.content [i] .title + '\') "* since in this way, onmousedown was executed before the google script closed the dropdown where the results are located.

Answer 1

Solution

In the end it was easier than it seemed: It was enough to change the attribute * onclick = "setAccommodation (\" '+ ui.content [i] .title +' \ ') "* by * onmousedown =" setAccommodation (\ "' + ui.content [i] .title + '\') "* since in this way, onmousedown was executed before the google script closed the dropdown where the results are located.