jQuery Girl
  1. jQuery Girl
  3. les modaux bootstrap3 créés dynamicment ne fonctionnent pas
Intereting Posts
Reconnaître en écrivant entre deux signes $$ Définition du délai d’attente jQuery.load () Pourquoi la ligne n’est-elle pas affichée dans les graphiques en haut? la fenêtre. Problème de redimensionnement disptachevent? jQuery mobile en passant de paramètre d’une page à une autre Imprimer un pdf sans l’ouvrir visuellement jqgrid inlineNav cloneToTop? Backbonejs utilisation de el Comment utiliser split mais ignorer html / javascript / php et les autres balises internes? Erreur ‘Access-Control-Allow-Origin’ dans un appel recaptcha Comment append et supprimer un atsortingbut requirejs avec une bascule JQuery Si l’atsortingbut href d’un élément est égal à l’atsortingbut href d’un autre élément, alors webservice – nom de paramètre de méthode Web inconnu nom de méthode Jquery JScrollPane – Définir la vitesse / sensibilité du défilement Empêcher CKEditor d’append ‘data-cke-saved’ et de convertir & lt

les modaux bootstrap3 créés dynamicment ne fonctionnent pas

J’ai une page avec une liste d’éléments générée dynamicment. Chaque élément a un bouton permettant de basculer la fenêtre modale avec plus d’informations mais modal n’apparaît pas Les modaux sont placés juste après la balise d’ouverture du corps:

Les boutons sont:

Si je place seulement le bouton et modal dans le corps html tout fonctionne bien. Qu’est-ce qui ne va pas?

Voici, étape par étape, l’implémentation dans l’un de mes projets, espérons que cela vous aidera.

1-Supposons que votre liste contient des boutons (exemple de la vue MVC Razor). 

 @foreach (var list in ListCollection) {
//Put here more details of the item, by Ajax call or any thing you like

4-Maintenant la partie script 

 $(document).ready(function () { $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget);//Button which is clicked var clickedButtonId= button.data('Id');//Get id of the button var modal = $(this); modal.find('.modal-body').text(clickedButtonId); //Id of the clicked button which i have put inside the modal-body div class or put info here using ajax call for the button that button. //Ajax call to get the more details of clicked button in the list. $.ajax({ url: "URL", type: "POST", data: JSON.ssortingngify({ id: clickedButtonId}), dataType: 'JSON', contentType: "application/json", success: function (response) { modal.find('.modal-body').text(response);//Put here more info using ajax } , error: function () { } }); }) });