Q:

new elements not seen by jQuery .on() method

I try to add a div after the change of file input  
my HTML code 
<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>

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

but the problem is that new elements are not seen by the .on() method and the .after() function is applied only to the first div.  
How can I solve this?

A:

You need to bind the event to the document element instead of .product-color element.
$(document).on('change', '.product-color input[type=file]', function () {
var  test = $(this).closest('.product-color').clone();
    $(this).closest('.product-color').after(test);
});

This is because you're cloning the .product-color element. So newly created elements won't have the event bound to them
Here is a working jsFiddle

