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つのゼロが表示され、次にフィールドを生成するボタンをクリックすると2つのゼロが表示されます。しかし、ファイアーバグを使ってこの問題をデバッグすることはできませんでした。私のコードに何が間違っているのか教えていただけますか？

Answer 1

このコードが複数回実行された場合、2つの同一のクリックハンドラが接続され、#gen_fieldがクリックされるとそれぞれが実行されます。

とにかくタグを作成するためにHTMLフラグメントをjQueryに渡す場合は、.attr()ではなくHTMLで同時に属性を指定してください。