매번 다른 매개 변수로 메소드를 호출하는 버튼을 동적으로 생성하십시오.

Question

jQuery를 사용하여 기존 테이블에 추가하는 행을 생성하고 있습니다. 나는이 행들 각각에 암호 버튼을 묻고 패스를 물어 본 다음이 행을 삭제하는 메소드를 호출하는 삭제 버튼을 포함하고 싶다. 이를 위해, 내가 이런 새로운 라인을 만들 :

$('tbody').append('<tr id="row' + index + '"><th>' + name + '</th>' + '<th>' + zutaten + '</th>' + '<th>' + foodtype + '</th>' + '<th><button onclick="showPwdDialog(' + index + ');">Delete</button></th></tr>'); 

당신이 볼 수 있듯이, 내가 매개 변수로 행 지수와 showPwdDialog 메소드를 호출하는 것을 시도하고있다. 그러나 이것은 효과가없는 것 같습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

당신처럼 HTML 조각을 통해 요소를 구성 할 때 onclick 처리기가 제대로 바인딩되지 않는다고 생각합니다.

어떨까요? 마법처럼

var index = 0; 

function showPwdDialog(i) { 
    if (confirm("Delete this row?")) 
    $("#test #row"+i).remove(); 
} 

function addRow(){ 
    var i = ++index; 
    var row = $("<tr>") 
    .attr("id", "row"+(i)) 
    .append($("<th/>").html("name")) 
    .append($("<th/>").html("zutaten")) 
    .append($("<th/>").html("name")) 
    .append($("<th/>") 
     .append($("<button/>") 
     .text("Delete") 
     .on("click", function(){ 
      showPwdDialog(i); 
     }) 
    ) 
    ); 

    /* add row to table here */ 
} 

jsfiddle