[Résolu] Non exécution d’événement sur jQuery - Via l'appel d'une modale par load par Earthgate - page 1

Bonjour,

Je n'arrive pas à trouver la solution à mon problème, certainement parce que je n'arrive pas à l'expliquer à Google

Lorsque j'appelle une modale par un load en jquery, elle s'affiche correctement mais mes événements JS sur cette modale ne sont plus exécutés. Dans l'exemple ci dessous, le bouton Close doit faire apparaître "ok" hors rien ne se passe...
Par contre, si je n'utilise pas load et que la modale est déjà présente dans le code, Close fait apparaitre "ok".

Avez-vous une idée sur l'explication et sa résolution ? Je dois vraiment faire apparaître ma modale dynamiquement. :/

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Activate Modal with JavaScript</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  
</div>

<script>
$(document).ready(function(){

	// Charge et affiche le formulaire d'inscription (register.inc.php)
	$("#myBtn").click(function(){
		$("#container-register").remove(); // Supprime l'éventuel contenaire de la modale
		$('<div id="container-register"></div>').appendTo('body'); // Créé le contenaire de la modale
		$('#container-register').load( "test_modal.php", function() { // Charge la modale dans le contenaire créé
			$('#myModal').modal('show'); // Affiche la modale confirmant l'inscription
		});
	});

	/*
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
*/
	
    $("#btnClose").click(function(){
        alert('ok');
    });

});
</script>

</body>
</html>

test_modal.php :

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header v2</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id="btnClose" >Close</button>
        </div>
      </div>
      
    </div>
  </div>

EDIT :

J'ai trouvé ! Comme le DOM est déjà généré au moment où la modale est créée, le bouton close n'existe pas encore l'évènement et donc il ne se passe rien.

Par conséquent il faut utiliser cette syntaxe :

$( "body" ).on( "click", "#btnClose", function() {

Source : http://www.umanit.fr/En-ce-moment/UmaNotes/fonction-on-jquery-elements-dom-dynamiques

-
Edité par Earthgate 23 juillet 2016 à 18:55:27

Non exécution d’événement sur jQuery

Via l'appel d'une modale par load

Non exécution d’événement sur jQuery

Supprimer

Modérer

Signaler le message aux modérateurs