为什么我的Javascript全局变量仅更新一次？ jQuery的最后一个选择器错误？

Question

I'm trying to learn jQuery and testing out ideas on JS Fiddle and I seem to be having a brain freeze.

The code below should display a row of a table that has a "+" at the end to add new rows. The first time I click, it properly assigns the new IDs to the new row (and resets values to a virgin state in the new row, changes the old row's "+" to a "-"). I'm not understanding why the values of oldID and newID don't continue to increment after the first run through the code.

It reads "32" as the numeric portion of the old last child, and then creates a new row with "33" appending it to the table but after that recomputing the id using the last child selector doesn't appear to actually pick the NEW last child.

While suggestions about how to make the code better are welcome, I really want to know specifically what I'm missing in the current code, inelegant as it may be.

Thanks!

<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>

And Javascript / jQuery code:

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

Answer 1

I think your problem is that you're never binding to click on the newly created person. Calling $("#add_more\\\\."+oldID).click(...) will bind to the original item, but not to new items as oldID changes.

Instead, I think you should be putting classes onto your elements:

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

Then, you can use something like jQuery.on :

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

That way, every time you add a new person, you won't have to bind a new handler, it will already work.