Question

for(let feature of features){
   $("#menuList").append("<li></li>");
}
$("#menuList li").on('click', function(ev){ 
  // I need a reference to the original feature object here 
});

在单击处理程序中获取对原始要素对象的引用的最佳方法是什么（不将某些ID作为数据标记传递并再次遍历列表）？

理想情况下，我可以做类似

的事情

for(let feature of features){
   $("#menuList").append("<li></li>").on('click', function(feature){ //do something with the feature object });
}

但这不起作用。

Answer 1

由于您要动态添加li elements，因此您需要执行event delegation即在现有元素上附加点击事件，在此处说#menuList并通过它导航到点击的li使用$(this)，您可以引用点击的元素，通过该元素可以获取index并从features获取原始对象，如下所示：

$("#menuList").on('click','li', function(ev){ 
  var currentIndex=$(this).index();
  var feature=features[currentIndex]; //your required object from features object
});

假设menuList每次都会追加新的li。

Answer 2

只需使用$(this)

类似的东西：

$('#menuList').on('click', 'li', function(ev){ 
  $(this).toggleClass('xxx');
  //console.log($(this));
});

li.xxx {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="menuList">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>five</li>
</ul>

Answer 3

您可以在处理程序中使用$(this)访问事件引发对象。

Answer 4

您可以使用$.fn.data()将元素保留feature，稍后可以在事件处理程序中检索该元素。

for (let feature of features) {
  var li = $("<li></li>");
  li.data('feature', feature);
  $("#menuList").append(li);
}
$("#menuList").on('click', 'li', function(ev) {
  var feature = $(event.target).data('feature');
});

jQuery - 将对象传递给单击处理程序

4 个答案: