Google Places AutoComplete - Clicking on link makes a function run

Question

Google Places AutoComplete - Clicking on link makes a function run

2.3k views Asked by Asool At 24 November 2024 at 22:58

I have an input field that uses google places autocomplete. At the top of the dropdown menu that appears when a user types a location, I added a link saying "Can't find address?"

What I want to accomplish:

When the user clicks on "can't find address?", I want a few input fields to appear, as such

(I got this image and idea from eventbrite)

I want those fields to appear right below the event location input field.

My idea is that I would just add a hidden class (display: none) to those input fields, and when the user clicks "can't find address", I'd remove the class. In theory, that should work.

However, I can't seem to figure out how to recognize that the user clicked the link. I tried to simplify the problem by simply outputting "Clicked!" when the user clicks "can't find address". But even that doesn't work. Any ideas?

Here is my code:

<div class="form-group">
    <label for="location">Event Location</label>
    <input name="location" type="text" class="form-control" id="location" placeholder="Hogwarts School, 127 Long Island">
</div>
<script>
          var ac = new google.maps.places.Autocomplete(document.getElementById('location'));
          ac.addListener('place_changed', function() {
              var place = ac.getPlace();                 
          });
          $('#location').on('click', function() {
                var picklist = $('.pac-container');
                var link = picklist.find('a');
                if(link.length === 0) {
                    picklist.append("<div class='pac-item'><a class='toggle'><div class='pac-icon'></div> Can't find address?</a></div>");
                    $('.toggle').on('click',  function() {
                          console.log("clicked!");

                    });
                }
          });

</script>

Original Q&A

There are 2 answers

Vinay On 18 December 2016 at 12:14

My guess is that autocomplete internally clones whatever html you pass in so event handlers gets removed but you can use bubbling to delegate click for '.toggle' on some root node like <body , <html> or document object itself .To avoid memory leaks i would suggest placingyour handler outside of $('#location').on('click', {.....})

Try this

   $(document).on('click', '.toggle',function() {
          console.log("clicked!"); 
   });

**Asool** · Accepted Answer · 2016-12-19 20:12:30

Figured it out! Thanks so much for your help.

So basically, when I tried anonymous' fiddle on the phone, it worked. In other words 'click touchstart' was recognized. On my laptop, I replaced 'click touchstart' that with 'mouseover', then hovered over "can't find address". It worked - the hover was detected. Which means that the event 'click' wasn't registering.

So I looked at the mdn event reference.

click: A pointing device button (ANY button) has been pressed and released on an element.

The problem is that as soon as a mouse is pressed, the pac-container is removed. In other words, you don't get a click and release.

So instead of using 'click', I used the 'mousedown' event, which only requires a mousepress. And it worked

$(document).on('mousedown', '.toggle',function() {
      console.log("clicked!"); 
      alert("HI");
      $('.pac-container').remove();
});

TechQA.

Google Places AutoComplete - Clicking on link makes a function run

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in AUTOCOMPLETE

Related Questions in GOOGLE-PLACES-API

Related Questions in GOOGLE-PLACES

Popular Questions

Popular Tags

Trending Questions