0

我正在尝试学习 jQuery 并在 JS Fiddle 上测试想法，但我似乎大脑冻结了。

下面的代码应显示表格的一行，该行末尾带有“+”以添加新行。第一次单击时，它会将新 ID 正确分配给新行（并将值重置为新行中的原始状态，将旧行的“+”更改为“-”）。我不明白为什么 oldID 和 newID 的值在第一次运行代码后不会继续增加。

它将“32”读取为旧的最后一个孩子的数字部分，然后创建一个新行，并将“33”附加到表中，但之后使用最后一个孩子选择器重新计算 id 似乎并没有实际选择 NEW最后一个孩子。

虽然欢迎有关如何使代码更好的建议，但我真的很想知道我在当前代码中缺少什么，尽管它可能不优雅。

谢谢！

<table>

<tbody id="investigators">
<tr id="investigator.32">

  <td>
    <input name="person.32" id="person.32"
           type="text" value=""
           placeholder="Lastname, Firstname" 
           onfocus="this.select();" />
  </td>

  <td style="text-align:center" id="add_more.32">
    <img src="add_green.svg"
         alt="[+]" title="Add investigator"
         style="height:1em; width:1em;" />
  </td>

</tr>
</tbody>

和 Javascript / jQuery 代码：

var oldID = parseInt($("#investigators :last-child")
                       .attr("id").split(".")[1]);
var newID = oldID+1;
$("#add_more\\."+oldID).click(function(){
  var $newPI = $("#investigator\\."+oldID).clone(true);
  $newPI.find("#person\\."+oldID)
    .val(null)
    .attr("placeholder","Jungle, George of")
    .attr("name","person."+newID)
    .attr("id",  "person."+newID);
  $newPI.find("#add_more\\."+oldID)
    .attr("id","add_more."+newID);
  $newPI
    .attr("id","investigator."+newID);
  $newPI.appendTo("#investigators");
  $("#add_more\\."+oldID+" :first-child")
    .attr("src","delete_red.svg")
    .attr("alt","[X]")
    .attr("title","Remove investigator");
  oldID = parseInt($("#investigators :last-child")
                       .attr("id").split(".")[1]);
  newID = oldID+1;
});
4

1 回答 1

0

我认为您的问题是您永远不会绑定到click新创建的人。调用$("#add_more\\."+oldID).click(...)将绑定到原始项目，但不会绑定到新项目作为oldID更改。

相反，我认为你应该把类放到你的元素上：

<td>
<input name="person.32" id="person.32"
       class="person" <!-- the important line -->
       type="text" value=""
       placeholder="Lastname, Firstname" 
       onfocus="this.select();" />
</td>

然后，您可以使用类似jQuery.on 的东西：

$(document).on("click", "person", function() {
    // Check that this is the last person here
});

这样，每次添加新人时，您都不必绑定新的处理程序，它已经可以工作了。

于 2013-08-16T16:29:22.553 回答