bootstrap modal comment détruire

Question

Je comprends que c'est une question fréquemment discutée. Mais aucune des réponses n'est satisfaisante.

Je suis incapable de réinitialiser/réinitialiser un modal bootstrap, après qu'il est caché.

Comme suggéré dans l'un des autres fils, je le code suivant:

$('#myModal').on('hidden', function() { 
    $(this).data('modal', null); 
}); 

Après cela, si le modal est montré à nouveau, le contenu ajouté dans le spectacle précédent reste encore.

Voici le jsfiddle link qui illustre le problème:

1. Après le modal est affiché en premier temps, si « Enregistrer les modifications » vous cliquez dessus, il va ajouter des éléments dynamiques du modal.
2. Ensuite, si vous cliquez sur le bouton de fermeture, le modal est masqué.
3. Si modal est invoqué à nouveau, il affiche les éléments ajoutés dynamiquement lors de son invocation précédente.

Quelle est la meilleure façon de réinitialiser ce modal.

Comme indiqué plus haut, le code ci-dessous ne semble pas fonctionner:

$(this).data('modal', null); 

Autre alternative serait de réinitialiser manuellement les champs à l'état d'origine.

Cependant, dans mon application pratique, je crée de nombreux éléments dynamiques et complexes pour le modal, donc l'option de réinitialisation est fastidieuse.

Answer 1

Le modal ne connaît pas vos champs de saisie. Vous devez effacer manuellement les dans l'événement caché:

$('#myModal').on('hidden', function() { 
    $('inputEmail').val(null); 
}); 

Vous pouvez créer un emballage personnalisé pour le modal bootstrap où vous donnez un tableau d'objets jQuery pour effacer:

var myModal = function (id, inputs) { 
    $(id).on('hidden', function() { 
     $.each(inputs, function(i, input) { 
      input.val(null); 
     }); 
    }); 
    return $(id).modal(); 
}; 

Ceci est juste Une idée approximative ....

La meilleure méthode consiste à utiliser un framework JavaScript, comme Knockout.js, Angular.js, Backbone.js ou autres. Ils peuvent vraiment vous aider avec des problèmes d'événements similaires.