jQuery каждый метод не будет выбран, добавлен HTML

Question

У меня есть карта и массив маркеров. Я хотел бы, чтобы пользователи могли нажимать на кнопку, которая включена в добавленный HTML, который добавляется к <p> с классом стороны. Приведенный ниже код - это то, что у меня есть, и оно работает для кнопок над картой, которые сейчас являются всего лишь тестом для кода.

Однако я бы хотел, чтобы кнопка «глаз» на боковой панели действовала так же, как кнопки выше.

Я пытался использовать $('#find').each, но это не работает.

Будет ли каждый метод не работать с добавленным HTML?

Я обнаружил, что это работает для добавленного HTML, однако он не запускает щелчок маркером. В настоящее время мне назначены кнопки «глаз»:

$(document).on('click', '#find', function(i) {
 alert("Hello! I am an alert box!!");
      google.maps.event.trigger(markers[i], 'click');
     });

Мой код на работе вы можете увидеть здесь: https://ddtech.live/test/

Отказ от ответственности: Это просто мое хобби и все еще учусь.

HTML

<p class="side"></p>

JS

 var markers = [];
        $('#btn button').each(function(i,e) {
          $(e).click(function(i,e) {  
           return function(e) {     
              google.maps.event.trigger(markers[i], 'click');
            }
          }(i));
        });


    var status = '<span style ="float: right"><button id="find" class="zoombtn2" onclick=""><i class="fas 
fa-eye"></i></button></span>'

     var name = markerData.first + " " + markerData.last;
     var str = name.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
      });

 $(document).ready(function() {
      $('p.side').append('<div class="boxed">' + str + status + '</div>');
       });

Answer 1

Завершено с использованием ниже. Еще раз спасибо за те, кто ответил.

function clickLatLng() {
  [...document.querySelectorAll('.boxed')].map((el, i) => {
    el.addEventListener('click', () => {
      map.panTo(markers[i].getPosition());
      map.setZoom(8);
    });
  });
}

side_bar_html += '<div class="boxed">' + str + location + live + '</div>';
//  put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;

Наряду с этим в качестве моей кнопки:

var location = '<button class="zoombtn" onclick="clickLatLng()"><i class="e70-5 x-icon" aria-hidden="true" data-x-icon-o=""></i></button>'

Answer 2

Вы не можете использовать $('#find').each, поскольку #find является идентификатором. Вы можете использовать идентификатор только для одного элемента на странице. Предполагая, что индексы ваших кнопок правильно коррелируют с маркером карт Google, вы можете использовать этот код:

$('.boxed button').each(function(i,e) {
  $(e).click(function(i,e) {
    return function(e) {
      google.maps.event.trigger(markers[i], 'click');
    }
  }(i));
});

Возможно, вы получите лучшие результаты при назначении атрибута данных каждой кнопке и использовании этого для выбора правильного маркера : <button data-id="someid"></button>

И в каждой функции вы бы выбрали атрибут данных с помощью: $(this).data("id")