如何从动态创建的元素中检索点击数据

Question

此代码循环将动态创建的 li 附加到 #carList

for (var i = 0; i < car.length; i++) {
                var carNow = car[i];
                $('#carList').append("<li>" + carNow.carName +
     </li>").data("item", {
                    index: i
                });
            };

此代码将单击事件侦听器绑定到 ul#carList。我知道我必须使用 JQuery 对象 ($(this(( 来公开点击的 li 上的数据，但我不确定具体如何。任何帮助不胜感激

 $('#carList').on('click', "li", one);
 function one() {
            controller.setCurrentCar($(this));
            carView.render();
        }

Answer 1

您可以向每个类添加类<li>然后在该类上放置一个单击事件。

var car = [{
  carName:"Subaru",
  model:"X1"
}, 
{
  carName:"Alfa Romero",
  model:"car2"
}]
$(function(){
  for (var i = 0; i < car.length; i++) {
    var carNow = car[i];
    $('#carList').append("<li class='car-item'>" + carNow.carName +
      "</li>").data("item", {
      index: i
    });
  };
  //click event for class .car-item
  $(".car-item").click(function(e){
    alert($(this).text());
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Click on the car names:<br>
<ul id="carList"></ul>

Answer 2

您使用与设置数据相同的.data()方法，使用与设置数据相同的字符串来检索数据

$(this).data("item");