J'ai une boîte de dialogue jQuery dans laquelle j'affirme un formulaire. Le formulaire a un div "picture_fields" dans lequel j'ajoute de nouveaux champs à si l'utilisateur clique sur "Ajouter plus de photos", à savoir le formulaire affiche avec un "Picture" fichier-champ, mais les utilisateurs peuvent ajouter plus de cliquer sur le " Ajouter plus de photos "lien.jQuery add se comporte étrangement dans le dialogue jQuery
Cela fonctionne très bien la première fois que le dialogue avec le formulaire est affiché, mais si vous fermez la boîte de dialogue, puis l'ouvrez à nouveau, l'ajout ne fonctionne plus. Vous pouvez cliquer sur le lien, mais aucun champ de fichier n'est ajouté. Je l'ai débogué et il appelle la fonction correcte, y compris l'ajout, mais il ne l'ajoute pas comme je m'y attendais.
Ceci est mon (abêtis) fonction qui gère le « Ajouter des photos » cliquez sur:
/**
* Add Picture Field Functionality
*/
$('form a.add_child').live('click', function() {
$("#picture_fields").append('<p> File Field Here </p>');
return false;
});
Ceci est mon gestionnaire de dialogue:
/**
* New Object Button opening modal Dialog
*/
$('.dialog_form_link').live('click', function() {
var $dialog = $('<div></div>')
.appendTo('body')
.load($(this).attr('href') + ' .entry_form')
.dialog({
title: $(this).text(),
modal: true,
autoOpen: false,
show: {effect: 'blind'},
hide: {effect: 'blind'},
});
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
L'utilisateur clique sur le « Nouvel objet "button (avec la classe" dialog_form_link ") qui ouvre le formulaire New Object dans la boîte de dialogue jquery. Dans cette boîte de dialogue, il clique ensuite sur le lien "Ajouter des images" (avec la classe "add_child"). Fonctionne bien la première fois que vous ouvrez la boîte de dialogue, ne fonctionne jamais après cela. Il ne recommence à fonctionner qu'après avoir rechargé toute la page Web, mais encore une fois.
== == Mise à jour J'ai essayé d'ajouter une option à proximité comme suggéré:
$('.dialog_form_link').live('click', function() {
var $dialog = $('<div></div>')
.appendTo('body')
.load($(this).attr('href') + ' .entry_form')
.dialog({
title: $(this).text(),
modal: true,
autoOpen: false,
width: 900,
height: '900',
position: 'center',
show: {effect: 'fade', duration: 300},
hide: {effect: 'blind', duration: 500},
close: function(ev, ui) { $(this).destroy(); alert("Closed"); }
});
J'ai aussi essayé avec close: function(ev, ui) { $(this).close(); }
. Les deux sont appelés à la fin de la boîte de dialogue (j'appuie sur le X et je vois l'alerte) MAIS après cela, je ne peux plus ouvrir la boîte de dialogue. J'ai la superposition grise mais pas de dialogue. Je crois que c'est une erreur débutant commune (et le garçon suis-je!) Avec les boîtes de dialogue jquery n'étant pas initialisées correctement alors peut-être que je fais quelque chose de complètement faux ici? Je crois que l'option autoOpen a aussi quelque chose à voir avec ça, donc j'ai activé et désactivé cela, avec close et destroy, mais encore une fois, pas de dés. Je vais jeter un oeil à this answer, mais en attendant, si quelqu'un a d'autres suggestions, je l'apprécierai grandement.
Quel code utilisez-vous pour fermer la boîte de dialogue? – codeulike