Javascript non appelé sur des champs construits "à la volée"

Bonjour,

Dans un formulaire d'encodage d'une anonce, je donne la possibilité d'uploader des photos. Comme leur nombre est indéterminé, via un bouton "Ajouter une photo" l'utilisateur peut ajouter "à la volée" un nouveau champ d'upload (champ de type "file") :

Dans mon template :

Code:

---

1 2	<ul class= "photos" data-prototype= " {{ form_widget ( formAdvert.photos.vars.prototype )| e ( 'html_attr' ) }} " >

---

Dans mon fichier javascript :

Code:

---

1 2 3 4

function addPhotoForm( collectionHolderPhotos , $newLinkLi ) { ... }

---

Or, afin de pouvoir afficher un preview de la photo avant qu'elle ne soit enregistrée, j'ai du javascript lié aux champs de type file de mon document :

Code:

---

1 2 3 4

$('input[type="file"]').change(function() { ... }

---

Pour un champ qui existe lors de la construction initiale du template, tout va bien, le javascript est bien exécuté lorsque le champ file est modifié. Par contre, s'il s'agit d'un champ créé via le javascript, le javascript lié au champ file n'est pas exécuté. En d'autres termes, le preview de la photo ne s'effectue alors pas.

Quelqu'un aurait une idée quant à la méthode pour résoudre ceci?

Merci d'avance pour votre aide!

C'est un classique JQUERY

il faut passer par l'attribution de l'event par délégation avec on à partir d'un parent. avec 3 paramètres (event, element cible, fonction)

Code:

---

1 2	$([selecteurParent]).on( 'change', 'input[type="file"]',function() {

---

Super, merci, ça a résolu mon problème!