2012-12-26 1 views
5

스팬이있는 li 항목을 만듭니다. JSON get 요청에 전달하기 위해 부모 li의 ID를 얻기 위해 span에서 onclick 함수를 만들었습니다. 고유 한 ID를 작성하여 JS 함수에서 읽는 방법을 잘 모르겠습니다. 이것은 동적으로 구축 되었기 때문에 스위치를 만들지 않았지만 다른 옵션이 누락 된 것처럼 느껴집니다. 여기에서 문제는 Li ID를 캡처 할 수 없다는 것입니다. 나는 이것을 시도하고 수업을 토대로 시도했지만, 모두 실패로 보인다.JS 또는 Jquery가 고유 한 스팬 ID를 만듭니다.

리 객체 생성 :

$("#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>'); 

클릭 기능에 :

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

이 함수는 아무 것도하지 않습니다. 그것은 "id"의 값을 가져 오지만 아무 것도하지 않습니다. – Pointy

+1

어떻게 이런 식의 코드를 유지합니까?! – elclanrs

+0

맞습니다. 브라우저에서 볼 때 어느 값을 얻지도 않습니다. 어느 Li가 요청을 보내고 있는지 알지 못하기 때문입니다. 나는 이것 때문에 다른 것을 추가하지 않았다 – atlMapper

답변

18

이 같은 시도 :

// 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)); 

그것은 클릭에 리튬의 임의 ID를 경고한다. 또한 인라인 CSS 대신 해당 스타일에 다른 클래스를 추가하십시오. 더 쉽고 간단합니다.

데모 :http://jsbin.com/avevim/1/edit

+0

그것은 훌륭합니다. 이것은 완벽하게 작동합니다. Jquery에서 li 및 span 객체를 생성 한 방법에 대한 문서는 무엇입니까? 나는 이것을 나중에 이해하도록 확실히 할 필요가있다. – atlMapper

+0

@atlMapper : 여기에 대한 문서가있다. 그것은 jQuery 메서드입니다. http://api.jquery.com/jQuery/ – elclanrs

4

는 밑줄이 같은 경우에 대한 uniqueId 기능을 제공합니다 (CTRL + 새로 고침 새로운 ID를 얻기 위해 입력). 날짜와 난수가 까다로워지기보다는 함수를 호출 할 때마다 글로벌 카운터를 유지하고 증분합니다.

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