вызвать оповещение при нажатии на выпадающий элемент Google - PullRequest
Новая
       7

вызвать оповещение при нажатии на выпадающий элемент Google

0 голосов
/ 16 января 2019

Поэтому я использую Google API, чтобы показать список мест в раскрывающемся списке, когда я набираю адрес.

Когда я нажимаю на одну из опций / адрес в раскрывающемся списке, я хочу, чтобы сработало предупреждение, которое говорит привет.Какой лучший способ сделать это?

Дополнительная информация:

Каждый элемент в раскрывающемся списке имеет класс 'pac-item' и находится внутри деления 'pac-container': 

<div class="pac-container pac-logo" style="width: 601px; position: absolute; left: 15px; top: 70px; display: none;">
  <div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">S</span>ão Paulo</span><span>State of São Paulo, Brazil</span></div>
  <div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">S</span>an Francisco</span><span>CA, USA</span></div>
</div>

Итак, я пытался получить элементы по названию класса, а затем, когда вы нажимаете на один из них, он должен предупредить «привет»

Однако, поскольку элементы в раскрывающемся списке не загружаются до тех пор, пока вы не нажмете на ввод, я думаю, что это вызывает проблему, когда страница загружается, и Javascript пытается получить элементы по имени их класса.

Что лучшеспособ это исправить?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
      integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
      integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
      crossorigin="anonymous"
    ></script>

    <title>Document</title>
  </head>
  <body>
    <div class="col-md-6">
      <form id="distance_form">
        <div class="form-group"><label>Origin: </label> <input class="form-control" id="from_places" placeholder="Enter a location" />
          <input id="origin" name="origin" required="" type="hidden" />
        </div>
      </form>
    </div>
    <script>

      $(function () {
        // add input listeners
        google.maps.event.addDomListener(window, "load", function () {
          var from_places = new google.maps.places.Autocomplete(
            document.getElementById("from_places")
          );
        });
         console.log(document.getElementsByClassName("pac-item"))

         let googleDropDown = document.getElementsByClassName("pac-item")

         googleDropDown.addEventListener('click', alert)

         function alert(){
           alert('hi')
         }
      });

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=en"></script>
  </body>
</html>

Редактировать:

Обертывание внутри google.maps.event.addDomListener позволяет мне регистрировать элементы на консоли, но также приводит к следующей ошибке: enter image description here

1 Ответ

0 голосов
/ 16 января 2019

Вы можете убедиться, что текущие и будущие элементы будут обрабатывать ваше событие нажатия с помощью функции .on () 

  $(function () {
    // add input listeners
    google.maps.event.addDomListener(window, "load", function () {
      var from_places = new google.maps.places.Autocomplete(
        document.getElementById("from_places")
      );
    });

     $("body").on("click", ".pac-container > .pac-item", function() {
         alert('hi');
     });
  });
...