Question

我正在尝试使用JQuery动态创建输入字段。它可以工作到一点，但绝对停止工作，在控制台没有错误，我很困惑，请帮忙。

我会在代码旁边添加一个代码段，以便您更好地了解正在发生的事情。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

以下是解决方案和工作代码：

 $(document).on("click","#add-color",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>');
    });

    $(document).on("click","#remove-color",function(){
        if($(".colors").length !== 1){
            $(".add-size").last().remove();
            $(".remove-size").last().remove();
            $(".colors").last().remove();
        }
    });
    $(document).on("click",".add-size",function(){
        $(this)
            .parent()
            .find(".size-input-house")
            .html($(this)
                .parent()
                .find(".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();
        }
    });

请注意代码中的$(document).on("click","#add-color",function(){更改。感谢上面给出答案的天才。

添加JQuery无法正常工作的输入字段

2 个答案: