Автозаполнение Google Places - нажатие на ссылку делает запуск функции

У меня есть поле ввода, которое использует автозаполнение google places. В верхней части раскрывающегося меню, которое появляется, когда пользователь вводит местоположение, я добавил ссылку «Не удается найти адрес?».Автозаполнение Google Places - нажатие на ссылку делает запуск функции

То, что я хочу сделать:

Когда пользователь нажимает на «? Не могу найти адрес», я хочу несколько полей ввода появляться, как таковой

(Я получил это изображение и идею от eventbrite)

Я хочу, чтобы эти поля появлялись прямо под e поле ввода местоположения вентиля.

Моя идея состоит в том, что я бы просто добавил скрытый класс (display: none) к этим полям ввода, а когда пользователь нажимает «не может найти адрес», я удаляю класс. Теоретически это должно работать.

Однако я не могу понять, как узнать, что пользователь нажал ссылку. Я попытался упростить проблему, просто выведя «Clicked!». когда пользователь нажимает «Не удается найти адрес». Но даже это не работает. Есть идеи?

Вот мой код:

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

источник

2016-12-18 Asool

Выяснил это! Большое спасибо за Вашу помощь.

Так что, в основном, когда я пробовал анонимную «скрипку по телефону, это сработало. Другими словами, «click touchstart» был признан. На моем ноутбуке я заменил «click touchstart», который с помощью «mouseover», затем зависал над «не может найти адрес». Это сработало - зависание было обнаружено. Это означает, что событие «click» не регистрировалось.

Итак, я посмотрел ссылку на событие mdn.

клик: кнопка нажатием кнопки (кнопка ANY) была нажата и отпущена на элементе.

Проблема в том, что как только мышь нажата, pac-контейнер удаляется. Другими словами, вы не получаете щелчок и не отпускаете.

Поэтому вместо того, чтобы использовать «щелчок», я использовал событие «mousedown», для которого требуется только мышь. И это сработало

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

источник

2016-12-19 20:12:30 Asool

Приятная находка .. Я думал, что она удалена после полного процесса «вниз», «вверх» и «щелкнуть», – Viney

Я думаю, что автозаполнение внутренне клоны независимо HTML вы передаете в так обработчики событий получает удалены, но вы можете использовать кипящий делегировать кликни '.toggle' на некотором корневом узле как <body, сам <html> или document объект .TO избежать утечек памяти я хотел бы предложить placingyour обработчик за пределами $('#location').on('click', {.....})

Попробуйте

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

источник

2016-12-18 12:14:22 Viney

Я попробовал, и, к сожалению, она не работает :( – Asool

Вы пытаетесь это по телефону? Если да, то вам нужно коснуться событий, как вэй, чтобы работать с накладками лубом случае иметь взгляд [ здесь] (https://jsfiddle.net/1qaeb5fn/) внести необходимые изменения – Viney

Поразмыслив! Большое спасибо за вашу помощь. – Asool

Автозаполнение Google Places - нажатие на ссылку делает запуск функции

ответ

Смежные вопросы