附加 HTML 后 JavaScript 不工作

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

我在一个表单中有 4 个输入。单击按钮后，它会向表单添加 1 个以上的文本输入。我在每个输入旁边还有一个删除按钮，以便用户可以根据需要删除该行。但我的问题是，单击“添加更多”按钮后，它会附加表单并添加新行，删除按钮不起作用，因为 JavaScript 不知道它已添加。我认为像 jquery .live() 这样的东西可以工作，但显然已被弃用。

这是单击“添加更多输入”按钮时添加的内容。

$("#nameInput").append('<tr><td><input type="text" id="name'+ inputNumber +'" class="names" name="name'+ inputNumber +'" placeholder="Twitch Username..." value="<?php echo $playerName5 ?>"> </td>
<td><input type="text" id="name'+ inputNumber +'Desired" class="desiredNames" name="name'+ inputNumber +'Desired" placeholder="Desired Username..." maxlength="20" value="<?php echo $desiredName5 ?>"> </td>
<td><a class="btn btn-mini delete" href="JavaScript:void(0);"><i class="icon-remove-sign icon-large"></i></a></td></tr>');

你可以在第三行看到我有一个类设置为“删除”。 javascript 无法识别此类，因为我猜页面加载时该信息最初并不存在。

这就是我用来删除信息的方法。

$(".delete").on("click", ".delete", function() {

if (confirm("Are you sure you want to delete this user?")) {

  $(this).closest("tr").find(".names").val("");

  $(this).closest("tr").find(".desiredNames").val("");

  $(this).closest("tr").fadeOut(450);

  inputNumber--

  if (inputNumber <= advancedPlan) {

    $("#addMore").fadeIn(450);

    $("#errors").fadeOut(450);

  }

}

});

编辑:没关系。小拼写错误。你们是对的!感谢您的帮助。

Answer 1

监听文档上的点击事件，如下所示:

$(document).on("click", ".delete", function() {
  // whatever you do to delete this row
})