Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Alors en faite, j'ai une sorte d'exercice à réaliser en JS, on arrive sur un page avec une vidéo et une checkbox, une fois les case coché, on peut "Valider" ce qui nous permet d'obtenir un feedback ( une correction en quelque sorte). Don lorsque l'utilisateur valide en cliquant sur le boutton "Valider" il obtient un feedback et la possiblité de passer à la vidéo suivante. Donc quand il valide, je remplace l'id du bouton "Valider" par un autre. Et j'applique un écouteur onclick sur cet nouvel id. Seulement voilà ça ne fonctionne pas du tout.

HTML

        <div class=" button_camera_quiz col-lg-1 col-sm-1 col-md-1 col-xs-5">
            <button class="btn-primary lang"  id="button_validate_camera_quiz"  key="button_validate_camera_quiz"></button>
        </div>

Ecouteur

  $('#button_validate_camera_quiz').on("click", function() {
    checkAnswer();
    buttonValidToNext()
  });

  $('#button_next_camera_quiz').on("click", function() {
      load_camera_quiz_container()
  });

JS

function buttonValidToNext() {
    $("#button_validate_camera_quiz").attr('key','button_next_camera_quiz') ;
    $("#button_validate_camera_quiz").attr('id','button_next_camera_quiz') ;
    //$("#button_validate_camera_quiz").replaceWith('<button class="btn-primary lang"  id="button_next_camera_quiz"  key="button_next_camera_quiz"></button>');
    alert("It works 1 !");
    load_content('exercices');
}
function buttonNextToValid() {
    $("#button_next_camera_quiz").attr('key','button_validate_camera_quiz') ;
    $("#button_next_camera_quiz").attr('id','button_validate_camera_quiz') ;
    alert('it works 2 ! ')
    //$("#button_next_camera_quiz").replaceWith('<button class="btn-primary lang"  id="button_validate_camera_quiz"  key="button_validate_camera_quiz"></button>');

}

Ce que je veux

Je voudrais qu'une fois que l'id est modifié l'écouteur fonctionne.

Ce que j'obtiens

Le contenu du bouton est bien modifié, de même pour l'id mais l'écouteur ne veut pas fonctionner.

Merci !

2 réponses


Balsakup
Réponse acceptée

Pour mettre un écouteur sur un élément dynamique on fait

$(document).on('click', '#element', function(event) {

});

Soit tu laisses document, soit tu mets un parent statique.

Ah niquel ! je te remercie ! :)