javascript - 当网页上存在类似的多个表格时，向表格添加一个表格行会出现问题吗？

Question

我有一个表单，其中包含一个 <div>标签及其中的 HTML。这就是页面加载时我所拥有的。然后通过 AJAX，我将相同的 block (即 )附加到现有 block 中。在每个 <div>标签有一个<table>在那<table>我有一个带有一流产品的按钮。单击它后，我正在计算编号。仅存在于该表中的行并将 id 分配给新添加的行。但我面临的问题是，当我使用 AJAX 添加多个此类表并单击任何表的添加按钮时，它会计算总数。所有表中存在的行数并添加那么多没有。我单击添加按钮的表的行数。这不应该发生。它只需添加一行。我创建了一个 jsfiddle 供您引用。在 fiddle 中，我放入了静态 HTMl，因此它在那里工作正常，但在我的本地计算机上，当我使用 AJAX 添加多个表时，我得到了错误的答案。添加的行数。例如，如果我添加了三个表并单击第一个表的添加按钮，则会向该表添加四行。为什么要计算总数？页面上所有表格中存在的行数？是否需要改进我的脚本？我的脚本如下:

$(document).ready(function() {
    $('.products').click(function () {
    var table_id = $(this).closest('table').attr('id');            
    var no = table_id.match(/\d+/)[0];            
    //var first_row = $(this).closest('table').find('tbody tr:first').attr('id');
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
    var new_row = $('#'+first_row).clone();
    var tbody = $('tbody', '#'+table_id);
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + no +'_'+ n);

    $(':input', new_row).not('.prod_list').remove();
    $('select', new_row).attr('name','product_id_'+no+'['+n+']');
    $('select', new_row).attr('id','product_id_'+no+'_'+n);
    $('<button style="color:#C00; opacity: 2;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);
    $('.delete').on('click', deleteRow);
   });   
});

以下是jsFiddle链接:http://jsfiddle.net/vrNAL/2/

Answer 1

我想你想查询的是:

var tbody = $('#' + table_id + ' tbody');

而不是:

var tbody = $('tbody', '#' + table_id);

从 jQuery 文档来看，我认为选择器不是这样工作的。