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

Why do my Javascript global variables only update once? jQuery last-child selector error?

本文关键字：jQuery 一次 最后一个 错误 选择器 全局变量 Javascript 我的 更新 为什么      更新时间：2023-09-26

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

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

它读取"32"作为旧的最后一个子项的数字部分，然后创建一个新行，"33"将其附加到表中，但在那之后，使用最后一个子选择器重新计算id似乎并没有真正选择新的最后一个子项。

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

谢谢！

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

我认为您的问题是，您永远不会绑定到新建人员的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
});

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

相关文章：