JS lub Jquery tworzą unikalny zakres ID

Question

Tworzę przedmiot LI z rozpiętością w środku. Zbudowałem funkcję onclick w zakresie, aby pobrać identyfikator rodzica li, aby przejść do żądania pobierania JSON. Nie jestem pewien, jak utworzyć unikalny identyfikator i przeczytać go w funkcji JS. Ponieważ jest on zbudowany dynamicznie, nie zbudowałem przełącznika, ale czuję, że brakuje mi innej opcji. Problem polega na tym, że nie mogę uchwycić kodu Li ID. Próbowałem tego, a także próbowałem na podstawie klasy, ale wszystkie wydają się zawodzić.

Li stworzenie obiektu:

$("#jdLists").append('<li class="bigger" id = "' + item.ID + '">'+ 
    item.GROUP_NAME + 
    '<span title="Remove from list" class=" Sp icon icon-color icon-plus" style="float: right; vertical-align: middle;" '+ 
    'onclick="spAdd()"></span>' + 
    '</li>'); 

na funkcję click:

function spAdd() { 
    $(this).closest("li").attr('id'); 
} 

Answer 1

Spróbuj tak:

// Should work for most cases 
function uniqId() { 
    return Math.round(new Date().getTime() + (Math.random() * 100)); 
} 

// Create elements properly and attach click event 
// before appending to DOM so it delegates the event 
var $li = $('<li/>', { 
    'class': 'bigger', 
    id: uniqId() 
}); 

var $span = $('<span/>', { 
    'class': 'Sp icon icon-color icon-plus', 
    title: 'Remove from list', 
    text: 'I\'m a span', 
    click: function() { 
    alert($(this).parent().attr('id')); 
    } 
}); 

$('#jsLists').append($li.append($span)); 

Należy ostrzegać losowy identyfikator Li na kliknięcia. Również zamiast wbudowanego css, dodaj inną klasę dla tych stylów; lepiej, prościej, łatwiej.

Demo:http://jsbin.com/avevim/1/edit (Ctrl + Enter, aby odświeżyć i uzyskać nowy identyfikator)

Answer 2

Podkreślenie zapewnia uniqueId funkcję takich przypadkach. Zamiast kłopotać się datami i liczbami losowymi, po prostu utrzymuje globalny licznik i zwiększa go za każdym razem, gdy funkcja jest wywoływana:

var idCounter = 0; 
_.uniqueId = function(prefix) { 
    var id = '' + ++idCounter; 
    return prefix ? prefix + id : id; 
};