動的に作成された要素からクリックデータを取得するにはどうすればよいですか？

Question

このコードループを動的に李さん

for (var i = 0; i < car.length; i++) { 
       var carNow = car[i]; 

       $('#carList').append("<li>" + carNow.carName + 
    </li>").data("item", { 
        index: i 
       }); 

      }; 

を#carListするこのコードは、UL＃carListにクリックのEventListenerをバインド作成し追加します。あなたは同じ.data()メソッドを使用して、私は私がクリックした李上のデータを公開するためにjQueryオブジェクト（$（この））を使用する必要がありますTHT知っているが、私は正確にhow..Anyヘルプが

$('#carList').on('click', "li", one); 

function one() { 
      controller.setCurrentCar($(this)); 
      carView.render(); 
     } 

Answer 1

を高く評価しているかわかりませんあなたは、そのクラスにクリックイベントを置くことが

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

Answer 2

あなたは各<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>