Le téléchargement de fichier jQuery ne fonctionne pas lorsque l’entrée de fichier est créée de manière dynamic

J’utilise cet outil de téléchargement jquery ( http://blueimp.github.io/jQuery-File-Upload/basic.html ) et cela fonctionne correctement lorsque l’entrée de fichier est placée dans le code brut du site, mais j’ajoute dynamicment les champs avec jQuery et cela ne fonctionne pas. voici le jquery pour déclencher le téléchargement:

$('.fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { alert(file.name); //$('').text(file.name).appendTo(document.body); }); } });

et c’est ce qui DEVRAIT déclencher le téléchargement:

Voici le code ajouté par jquery:

 $(document).on('click','.addItem', function(){ $('\ \ \ 
\ 
\ 
\ \ <input type="hidden" name="itemInventoryId[]" value="">\ \ \ \ \ 
\ 
\      
\ 
\ 
\ ').fadeIn(500).appendTo($(this).parents().siblings('.items')); $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn(); });

comme je le dis, quand je l’ajoute dans le code actuel, pas dynamicment son amende. Quelqu’un peut aider s’il vous plaît?

En effet, vous liez l’événement fileupload avant l’ajout de l’élément.

Essayez de déplacer votre code dans la fonction de rappel qui sera exécutée après la création de l’élément d’entrée. appendTo() ne supportant pas le rappel , vous pouvez utiliser each(callback) :

 $('code_that_you_append').appendTo('some_element').each(function () { // here goes $('.fileupload').fileupload({ ... }) function });

Si vous devez lier un événement à .fileupload à plusieurs endroits dans le code, vous pouvez créer une fonction pour éviter la répétition du code, comme ceci:

 function bindFileUpload() { $('.fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { alert(file.name); }); } }); };

puis appelez-le dans le rappel, comme avant:

 $('code_that_you_append').appendTo('some_element').each(function () { bindFileUpload(); });

J’ai créé une petite démo . Il lie click au lieu de fileupload pour simplifier les choses (fileupload est un plugin externe …), mais la règle générale rest la même.

Vous devez utiliser la fonction jQuery live ().

Cette astuce que j’ai trouvée a fonctionné pour moi.

jQuery fileupload pour un champ de saisie ajouté dynamicment

Liez simplement la fonction de téléchargement avec un identifiant statique dans un premier temps. Ici, ‘document’ est l’identifiant statique. Vous pouvez utiliser quelque chose comme ceci qui n’a pas été ajouté dynamicment. Habituellement, le document est utilisé plus souvent.

 $(document).on('click', '.fileupload', function () { $('.fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { alert(file.name); //$('
').text(file.name).appendTo(document.body); }); } }); });

NB: S’il vous plaît voir la réponse acceptée en premier.

Je pense que la réponse acceptée a peu d’erreur. J’essaie juste de récupérer ça. Sur la petite démo de @ Michał Rybak, vous verrez que chaque fois que nous cliquons sur add item un add item un autre événement de clic sera également ajouté au new link ajouté précédemment (ajoutez plus qu’un new link et voyez le premier new link affichant le numéro d’alerte de chaque new item ). Parce que chaque fois qu’il ajoute un new link nous ajoutons encore un événement click à tous les new link éléments de new link .

  $('new link
').appendTo('body').each(function () { // bindClickToLink call every 'new link' and add click event on it bindClickToLink(); });

Pour résoudre ce problème, ajoutez plutôt l’événement click à tous les éléments que nous venons d’append au nouvel élément créé. Voici ma solution ma démo .