новые элементы не замеченные JQuery .on() метод

Question

Я пытаюсь добавить DIV после изменения входного файла

мой HTML код

<div class="form-group product-color"> 
    <div> 
     <label>Color:</label> 
     <input type="text" placeholder="Color name"/> 
    </div> 

    <div> 
     <label>Size:</label> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off" checked> S 
      </label> 
      <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> M 
      </label> 
      <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> L 
      </label> 
      <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> XL 
      </label> 
      <label class="btn btn-primary"> 
      <input type="checkbox" autocomplete="off"> XXL 
      </label> 
     </div> 
    </div> 

    <div> 
     <label>Color Image:</label> 
     <input type="file" class="input-lg product-img" multiple=""/> 
    </div> 
</div> 

и мой код JQuery является

$(".product-color").on('change', 'input[type=file]', function() { 
    var test = $(this).closest('.product-color').clone(); 
    $(this).closest('.product-color').after(test); 
}); 

, но проблема в том, что новые элементы не видны методом .on(), а функция .after() применяется только к первому div.

Как я могу это решить?

Answer 1

Вы должны связать это событие с document элемента вместо .product-color элемента.

$(document).on('change', '.product-color input[type=file]', function() { 
var test = $(this).closest('.product-color').clone(); 
    $(this).closest('.product-color').after(test); 
}); 

Это потому, что вы клонировать .product-color элемент. Таким образом, вновь созданные элементы не будут иметь события, связанного с ними

Вот это рабочий jsFiddle

Answer 2

В вашем HTML-элементе нет элемента, который является родителем $(".product-color"). Попробуйте вставить свой HTML после последнего $(".product-color"), используя last().

$(".product-color").on('change', 'input[type=file]', function() { 
    var test = $(this).closest('.product-color').clone(); 
    $(".product-color").last().after(test); 
}); 

Answer 3

Try регулировки test к $(this).closest('.product-color');; добавить true как параметр в .clone() для сохранения приложенного change событие при клонировании ".product-color" элементов; звоните на следующей строке

$(".product-color").on('change', 'input[type=file]', function() { 
 
    var test = $(this).closest('.product-color'); 
 
    test.after(test.clone(true)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group product-color"> 
 
    <div> 
 
     <label>Color:</label> 
 
     <input type="text" placeholder="Color name"/> 
 
    </div> 
 

 
    <div> 
 
     <label>Size:</label> 
 
     <div class="btn-group" data-toggle="buttons"> 
 
      <label class="btn btn-primary"> 
 
      <input type="checkbox" autocomplete="off" checked> S 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
      <input type="checkbox" autocomplete="off"> M 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
      <input type="checkbox" autocomplete="off"> L 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
      <input type="checkbox" autocomplete="off"> XL 
 
      </label> 
 
      <label class="btn btn-primary"> 
 
      <input type="checkbox" autocomplete="off"> XXL 
 
      </label> 
 
     </div> 
 
    </div> 
 

 
    <div> 
 
     <label>Color Image:</label> 
 
     <input type="file" class="input-lg product-img" multiple=""/> 
 
    </div> 
 
</div>