javascript에서 2 dom 요소 생성

Question

어떻게 이런 문제를 디버깅합니까? 나는이 코드를 가지고있다 :

var index = 0; 
$('#gen_field').click(function() { 

    var next_row = $('<tr>').attr({ 
     'id': 'tbl_row' + index 
    }).appendTo('#tbody_coll'); 

    var td1 = $('<td>').attr({ 
     'id': 'td_collector' + index 
    }).appendTo(next_row); 
    var td2 = $('<td>').attr({ 
     'id': 'td_rem' + index 
    }).appendTo(next_row); 

    var collector = $('<input>').attr({ 
     'type': 'text', 
     'name': 'collector[]' 
    }).appendTo(td1).css('width', '200px'); 

    var rem_btn = $("<input>").attr({ 
     'type': 'button', 
     'id': index, 
     'name': 'rem', 
     'class': 'rem', 
     'value': 'del' 
    }).appendTo(td2).addClass('span-2'); 

    console.log(index); 
    index++; 
}); 

이것은 한 번에 1 필드 만 생성한다고 가정한다. 그러나 한 번에 같은 분야의 2 생성. Console.log는 또한 필드를 생성하는 버튼을 클릭 할 때 2 개의 0을 표시 한 다음 2 개의 0을 표시합니다. 하지만 방화 광을 사용하여이 문제를 디버깅 할 수는 없습니다. 내 코드에 어떤 문제가 있는지 말해 줄 수 있습니까?

Answer 1

이 코드가 두 번 이상 실행되면 두 개의 동일한 클릭 핸들러가 연결되고 #gen_field을 클릭하면 각각이 실행됩니다.

어쨌든 태그를 만들기 위해 HTML 조각을 jQuery에 전달하려는 경우 .attr() 대신 HTML에서 동시에 속성을 지정하지 않으시겠습니까?