for 루프에서 클릭 이벤트를 바인딩합니다.

Question

for 루프에 정렬되지 않은 목록과 버튼을 만듭니다. 같은 for 루프에있는 버튼의 클릭 기능을 바인딩하고 싶습니다.

연결 옵션으로 시도했습니다. 작동하지 않습니다.

function displayFeeds(items){ 
    var ul = $('#listview'); 
    for (var i = 0; i < items.length; i++) { 
     var li = $('<li/>').html(items[i].DeviceNames); 
     li.append($('<li/>').html(items[i].DeviceQuantity)); 
     li .append('<input type="button" value="Add" id="'+i+'">'); 
     // Enhance new button element 
     li.append($('<hr>')); 
     ul.append(li); 


    $('#"+i+"').bind('click', function() {    
     console.log("called"); 
     var clickedID = this.id; 
     console.log(clickedID); 
     UpdateDeviceDetails(clickedID);    
    }); 
    } 
} 

여기서 어떻게해야합니까?

Answer 1

시도 작업에서 현재 코드를 중지 구문 오류에서

$('#"+i+"').bind('click', function() { 

에

$('#'+i).bind('click', function() { 

Answer 2

을 제외하고 변경 비교적 느린 것 루프에서 클릭 처리기의 x 수를 추가. 더 나은 해결책은 단일 공유 부모 요소에 대리자 이벤트를 첨부하는 것입니다. 이 시도 :

$('#listview').on('click', '.add-input', UpdateDeviceDetails); 

var UpdateDeviceDetails = function(el) { 
    var id = el.id; 
    // rest of your logic... 
} 

은 또한 당신의 jQuery를에 의해 생성 된 HTML이 유효하지 않습니다 :

function displayFeeds(items){ 
    var ul = $('#listview'); 
    for (var i = 0; i < items.length; i++) { 
     var li = $('<li/>').html(items[i].DeviceNames); 
     li.append($('<li/>').html(items[i].DeviceQuantity)); 
     li.append('<input type="button" value="Add" class="add-input" />'); 
     li.append($('<hr>')); 
     ul.append(li); 
    } 
} 

// single event handler... 
$('#listview').on('click', '.add-input', function() { 
    UpdateDeviceDetails(this.id);    
}); 

당신은 심지어 바로 click 핸들러에이 같은 일을 UpdateDevideDetails의 참조를 전달하여 그 단순화 할 수 - 다른 li 요소의 직계 하위 항목으로 li을 가질 수 없습니다. li 요소는 모두 ul 또는 ol이어야합니다.