javascript - 添加 JQuery 不起作用的输入字段

Question

我正在尝试使用 JQuery 动态创建输入字段。它可以工作到一定程度，但随后完全停止工作，控制台中没有错误，我很困惑，请帮助。

我将在代码旁边附加一个片段，以便您可以更好地了解正在发生的情况。

我无法定义问题，因为我不完全理解发生了什么，但我可以尝试:

当我创建一种颜色时，我还想在该颜色下创建一个尺寸，它适用于第一种颜色，但不适用于其他颜色。我做错了什么？

$(document).ready(function() {
  $("#add-color").click(function() {
    $("#color-input-house")
      .html($("#color-input-house")
        .html() + '<div class="form-group">' +
        '<input type="text" class="form-control colors" placeholder="Color">' +
        ' <button type="button"  class="add-size small btn btn-primary rounded form-control">Add Size</button>' +
        ' <button type="button"  class="remove-size small btn btn-warning rounded form-control">Remove Size</button>' +
        ' <div class="size-input-house"></div></div>');
  });
  $("#remove-color").click(function() {
    if ($(".colors").length !== 1) {
      $(".add-size").last().remove();
      $(".remove-size").last().remove();
      $(".colors").last().remove();
    }
  });
  $(".add-size").click(function() {
    $(this)
      .parent()
      .find(".size-input-house")
      .html($(".size-input-house")
        .html() + '<div class="form-group">' +
        '<input type="text" class="form-control sizes" placeholder="Size"></div>');
  });
  $(".remove-size").click(function() {
    if ($(".sizes").length !== 1) {
      $(".sizes").last().remove();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" class="form-control colors" placeholder="Color">
  <button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>
  <button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>
  <div class="size-input-house"></div>
</div>
<div id="color-input-house"></div>
<div class="form-group">
  <div>
    <button type="button" id="add-color" class="small btn btn-primary rounded form-control">Add Color</button>
    <button type="button" id="remove-color" class="btn btn-warning rounded form-control">Remove Color</button>
  </div>
</div>

Answer 1

当您使用 jquery 添加某些内容并且想要应用时，请单击它们，最好在 jquery 中使用以下格式:

$(document).on("click",".add-size",function(){
    $(this)
        .parent()
        .find(".size-input-house")
        .html($(".size-input-house")
            .html()+'<div class="form-group">' +
        '<input type="text" class="form-control sizes" placeholder="Size"></div>');
});

另一个也是同样的方式:

   $(document).on("click",".remove-size",function(){
        if($(".sizes").length !== 1){
            $(".sizes").last().remove();
        }
    });