Блог

Я пытаюсь создать поле ввода динамически, используя 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>  

когда вы добавляете что-то с помощью 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();
        }
    });
  

Вот решение и рабочий код:

  $(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(){ изменения по всему коду. Спасибо гению, который дал ответ выше.