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++;
});

这应该一次只生成一个字段。但它同时产生了2个相同的领域。当我点击生成字段的按钮时，Console.log也会显示2个零，然后显示2个零。但我无法使用firebug进一步调试此问题。你能告诉我我的代码有什么问题吗？

Answer 1

如果此代码多次执行，则会附加两个相同的点击处理程序，并且每个点击处理程序都会在单击#gen_field时运行。

BTW，如果您要将HTML片段传递给jQuery以创建标记，为什么不在HTML中同时指定属性而不是使用.attr()？

在javascript中生成2个dom元素

1 个答案: