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() {

  [...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').eachas#find是一个 id。每页只能为一个元素使用一个 id。假设您的按钮索引与谷歌地图标记正确相关，您可以使用以下代码：

$('.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")