jQuery的克隆按钮动作不起作用

Question

我有一个带有添加/删除按钮的表，这些按钮添加和删除表中的行，每个新行也添加按钮

这是我拥有的HTML

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<- target row ->
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</- target row ->
</table>

JavaScript：

$("#Add").click(function() {
         $('#cat_row').after('<- target row with ->'); // this is only a notation to prevent repeatation
         id++;
});

$("#Remove").click(function() {
         $('#cat_'+id+'_row').remove();
         id--;
});

请注意，每次添加新行后， id也会更改，例如，单击“添加”按钮1次后，此处的id也将更改

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
<tr id="cat_1_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</table>

现在， 新添加的按钮没有动作，我必须始终单击原始按钮 -添加/删除

在此之后，我想使“ 删除按钮” 仅 删除单击它的行，例如，如果我单击第2行中的按钮，则将删除第2行

---

信息：我将python 2.7和web2py 2.2.1与jQuery的最新版本一起使用

Answer 1

您不能有两个具有相同id按钮（您对“添加”和“删除”都使用了重复的按钮）。 id值在页面上必须唯一 。

您可能会考虑使用一个类，同时还会考虑事件委托。 例如，假设这是页面上的唯一表（如果没有，则只需使选择器更具体），如果将按钮更改为具有“ add-btn”和“ remove-btn”类而不是id值，则您可以使用delegate ：

$("table").delegate(".add-btn", "click", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

...以及类似的.remove-btn按钮。

或者，有些用户更喜欢使用on （请注意，参数的顺序略有不同）：

$("table").on("click", ".add-btn", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

当前使用的是样式问题。 为了清晰起见，我更喜欢使用delegate ，但是jQuery团队喜欢超载其功能。 到目前为止，他们还没有弃用delegate ，尽管他们确实称其为“替代”。

Answer 2

我认为这会比以下更好：

$('#cat_'+id+_row').remove();

在您的onclick事件中执行此操作：

$(this).parent().parent().remove();