jQuery присоединяется только к Существующим объектам

Question

Я пытаюсь создать кнопку, в которой onclick добавляет некоторые новые элементы html на страницу, но jQuery не прикрепляет к новым объектам.

<script> 
jQuery(document).ready(function(){ 
    jQuery("input[type='button']").click(function(){ 
     var ask=confirm('Are you sure'); 
     if(ask){ 
      var n=jQuery(this).parent(); 
      var s=jQuery(this).prop('id'); 
      n.html('Select Picture: <br><input type="file" name="'+s+'" id="'+s+'" required>'); 
      } 
     } 
    }); 
    jQuery(":file").change(function() { 
     var na=jQuery(this).val(); 
     alert(na); 
    }); 
}); 
</script> 

теперь вот это form Пример для этого кода:

<form> 
      <div><img src="image/source"><br> 
      <input type="checkbox" required value="1" name="product1">image is ok<br> 
      <input type="button" value="change image" id="product1" name="product1b"></div> 
<input type="file" name="product2"> 
</form> 

Так что, когда я нажимаю на button в form изменения к этому:

<form> 
<div> 
Select Picture: <br> 
<input type="file" name="product1" id="product1" required> 
</div> 
<input type="file" name="product2"> 
</form> 

проблема является то, что функция JQuery jQuery(":file").change(function() { работает для product2, но не для product1, потому что его там не было на странице l oad и jQuery не прилагается к нему.

Answer 1

Вы должны использовать делегированное событие, когда ваши элементы являются динамическими:

jQuery(document).on('change', ':file', function(){ 
    // do stuff 
});