如何在 jquery 中动态添加 onclick 事件

Question

我正在尝试动态添加点击处理程序，但它不起作用。这是我的代码：

    function refreshSidebar(){
      
      if (mapMode=="normal") { features=allFeatures.getSource().getFeatures()}
      else if (mapMode=="filtered") {features=filteredFeatures.getSource().getFeatures()}
      $("#list").html("");
      html="<ul>"
      for (i=0;i<features.length;i++)
      {
        
        if (typeof features[i].description!="undefined"){
        html+="<li id=FEAT_"+features[i].id+">"+features[i].description+"</li>";
        $("#FEAT_"+features[i].id).prop("onclick", null).off("click");

        $("#FEAT_"+features[i].id).on('click', function()
        {
          map.getView().setCenter(features[i].geometryChangeKey_.target.getFlatCoordinates());
          map.getView().setZoom(10)
        })

      }

我做错了什么？

Answer 1

问题是 $("#FEAT_"+features[i].id) 将尝试在 DOM 中查找具有该选择器的元素。您的 HTML 此时仅存在于字符串中，因此无法找到该元素并且不会附加事件侦听器。

您可以创建可以将事件附加到的元素，而不是创建包含 HTML 的字符串。您可以在元素成为 DOM 的一部分之前执行此操作，然后将元素附加到 DOM。

$("#list").html("");

const list = $("<ul></ul>");

for (let i = 0; i < 5; i++) {
  const listItem = $("<li id=FEAT_" + i + ">List item " + i + "</li>");

  listItem.click(function() {
    console.log('List item clicked', this.id);
  });

  list.append(listItem);
}

$("#list").append(list);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">

</div>

如何在 jquery 中动态添加 onclick 事件

How to dynamicaly add onclick event in jquery

jquery

openlayers