Wie können Klickdaten von dynamisch erstellten Elementen abgerufen werden?

Question

Dieser Code Schleife anhängt dynamisch li erstellt

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

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

      }; 

Dieser Code bindet einen Klick auf eventlistener #carList # carlist UL. Ich weiß, dass tht muss ich die JQuery-Objekt verwenden ($ (this)) die Daten über die angeklickt li aussetzen, aber ich bin nicht sicher genau how..Any Hilfe

geschätzt

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

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

Answer 1

Sie verwenden die gleiche Methode .data() Sie verwendet, um die Daten zu setzen es mit der gleichen Zeichenfolge Sie es

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

Answer 2

Sie Klasse dann auf dieser Klasse ein Click-Ereignis setzen zu jedem <li> hinzufügen können festlegen verwendet abzurufen.

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>