jQuery 新按钮已创建，但不会被删除

Question

以下代码可以添加按钮，但新创建的按钮不起作用。出了什么问题？如何选择和删除新创建的按钮？我刚刚执行了 W3Schools 的 jQuery 教程并找到了一些示例，但它们使用不同的代码，我想了解我做错了什么。我希望你能帮上忙。

$(document).ready(function() {
  $("#min").hide();
  $("#plus").click(function() {
    $("#min").show();
    var row =
      "<div class=\"container\">\n" +
      "<input type=\"text\"/>\n" +
      "<input type=\"button\" id=\"plus2\" value=\"+\"/>\n" +
      "<input type=\"button\" id=\"min2\" value=\"-\"/>\n" +
      "</div>\n";
    $(this).parent().after(row);
  });
  $("#plus2").click(function() {
    $("#min").show();
    var row =
      "<div class=\"container\">\n" +
      "<input type=\"text\"/>\n" +
      "<input type=\"button\" id=\"plus3\" value=\"+\"/>\n" +
      "<input type=\"button\" id=\"min3\" value=\"-\"/>\n" +
      "</div>\n";
    $(this).parent().after(row);
  });
  $("#min").click(function() {
    $(this).parent().remove();
  });
});

div.container {
  border: 1px solid red;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <fieldset>
    <legend>fieldset</legend>
    <div class="container">
      <input type="text" />
      <input type="button" id="plus" value="+" />
      <input type="button" id="min" value="-" />1
    </div>
  </fieldset>
</div>

Answer 1

这很可能是因为函数运行时，#plus2 不存在。您只需像这样委托(delegate)您的点击语句:

$('.main').on('click', '#plus2', function() {

但是，如果您想做得更好，您应该使用类而不是 ID，这将大大减少所需的 JavaScript 代码量。您还可以使用克隆功能，这样您就不需要在 JS 中写出任何 HTML 字符串

$(document).ready(function() {
  $('.min').hide();
  $('.main').on('click', '.plus', function() {
    $('.min').show();
    var row = $('.container').eq(0).clone();
    $(this).parent().after(row);
  });
  $('.main').on('click', '.min', function() {
    $(this).parent().remove();
    if ($('.min').length == 1) {
      $('.min').hide();
    }
  });
});

div.container {
  border: 1px solid red;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <fieldset>
    <legend>fieldset</legend>
    <div class="container">
      <input type="text" />
      <input type="button" class="plus" value="+" />
      <input type="button" class="min" value="-" />1
    </div>
  </fieldset>
</div>