배열의 각 목록 항목을 클릭 할 수있게 만드는 방법은 무엇입니까?

Question

나는 가장 가까운 위치별로 정렬해야하는 다른 도시 목록을 가지고 있습니다. 내가 궁금 http://jsfiddle.net/t24g3umj/

var jsonString ='{"City A":{"Position":{"Longitude":9.96233,"Latitude":49.80404}},"City B":{"Position":{"Longitude":6.11499,"Latitude":50.76891}},"City C":{"Position":{"Longitude":6.80592,"Latitude":51.53548}},"City D":{"Position":{"Longitude":9.50523,"Latitude":51.31991}},"City E":{"Position":{"Longitude":9.66089,"Latitude":48.70158}},"City F":{"Position":{"Longitude":9.93368,"Latitude":53.55608}},"City G":{"Position":{"Longitude":11.56122,"Latitude":48.14496}},"City H":{"Position":{"Longitude":13.34253,"Latitude":52.5319}},"City I":{"Position":{"Longitude":6.11327,"Latitude":50.77715}},"City J":{"Position":{"Longitude":13.36671,"Latitude":52.54344}}}'; 

var myData = JSON.parse(jsonString); 

$(document).ready(function() { 

var distanceObj = [], 
    i = 0; 
$.each(myData, function (a, b) { 
    distanceObj[i] = { 
     distance: hesapla(9.9608999, 49.7222842, b.Position.Longitude, b.Position.Latitude), 
     location: a 
    }; 
    ++i; 
}); 

distanceObj.sort(function (a, b) { 
    return parseInt(a.distance) - parseInt(b.distance) 
}); 

$.each(distanceObj, function (a, b) { 
    $('#groups').append('<li>' + b.location + ': ' + b.distance + 'm</li>'); 
}); 

console.log(distanceObj); 

function hesapla(meineLongitude, meineLatitude, long1, lat1) { 
    erdRadius = 6371; 

    meineLongitude = meineLongitude * (Math.PI/180); 
    meineLatitude = meineLatitude * (Math.PI/180); 
    long1 = long1 * (Math.PI/180); 
    lat1 = lat1 * (Math.PI/180); 

    x0 = meineLongitude * erdRadius * Math.cos(meineLatitude); 
    y0 = meineLatitude * erdRadius; 

    x1 = long1 * erdRadius * Math.cos(lat1); 
    y1 = lat1 * erdRadius; 

    dx = x0 - x1; 
    dy = y0 - y1; 

    d = Math.sqrt((dx * dx) + (dy * dy)); 


    return Math.round(d * 1000); 
}; 
});  

어떻게 리튬의 각 요소가 클릭 할 수 있도록 : 여기

는 바이올린입니까?

또한 두 번째 질문은 거리에 관계없이 목록 상단에 특수 도시를 필터링하는 방법입니다.

미리 멋진 커뮤니티에 stackoverflow에 감사드립니다.

Answer 1

1. 또한 동적 리를 추가 점을 감안 on를 사용하여 핸들러에 바인딩 위임 이벤트를 사용할 수 있습니다 :

$(document).ready(function() { 
    $('#groups').on('click', 'li', function() { 
     // handler here 
    } 

1. 당신은 바닥

$('#groups').prepend('<li>I am special ...</li>'); 

Answer 2

당신이 원하는가요?

$.each(distanceObj, function(a, b) { 
    $('#groups').append('<li><a href="#">' + b.location + ': ' + b.distance + 'm </a></li>'); 
}); 

Answer 3

요소를 클릭 할 수있게하려면 각 li 내에 "<a>" 태그를 사용해야합니다. 수정 된 코드는 다음과 같습니다.

$.each(distanceObj, function(a, b) { 
    $('#groups').append('<li><a href="#">' + b.location + ': ' + b.distance + 'm </a></li>'); 
}); 

http://jsfiddle.net/t24g3umj/1/