jQuery 每个方法都不会选择附加的 HTML

Question

我有一张地图和一组标记。我希望用户能够单击包含在附加 HTML 中的按钮，该 HTML 添加到<p>带有侧类的 a 中。下面的代码是我所拥有的，它适用于地图上方的按钮，现在只是对代码的测试。

但是，我希望侧边栏上的眼睛按钮像上面的按钮一样工作。

我曾尝试使用$('#find').each，但它不起作用。

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() {&nbsp; [...document.querySelectorAll('.boxed')].map((el, i) => {&nbsp; &nbsp; el.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; map.panTo(markers[i].getPosition());&nbsp; &nbsp; &nbsp; map.setZoom(8);&nbsp; &nbsp; });&nbsp; });}side_bar_html += '<div class="boxed">' + str + location + live + '</div>';//&nbsp; put the assembled side_bar_html contents into the side_bar divdocument.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').eachas#find是一个 id。每页只能为一个元素使用一个 id。假设您的按钮索引与谷歌地图标记正确相关，您可以使用以下代码：$('.boxed button').each(function(i,e) {&nbsp; $(e).click(function(i,e) {&nbsp; &nbsp; return function(e) {&nbsp; &nbsp; &nbsp; google.maps.event.trigger(markers[i], 'click');&nbsp; &nbsp; }&nbsp; }(i));});在为每个按钮分配数据属性并使用它来选择正确的标记时，您可能会得到更好的结果：<button data-id="someid"></button>在您的每个函数中，您将选择数据属性：$(this).data("id")