Création et récupération de tables et de boutons dans la table à l'aide d'AJAX.

Le bouton dans la table apportée ne fonctionne pas. Je ne vois aucune action liée au clic sur le bouton de la console. Quelle pourrait être la raison pour laquelle le bouton ne fonctionne pas ?

Structure de code pour la création de boutons :

for (var i = 0; i < finishedExams.length; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + result + '</td><td>' + title + '</td><td>' + et + '</td><td>' + humanized_time_span(date) + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + id + '"> Send</button></div></td></tr>';
}

Structure de code liée au clic sur le bouton :

$('.sendButtonData').click(function () { 
        /* AJAX POST code here.. */
        if (response.status == true) {
            /* some codes */
        } else {
            /* some codes */
        }
    });

Qu'est-ce que j'ai essayé?

$('body').on('click', '.sendButtonData', function(){

Ce code fonctionne mais l'obtient avec l'ID de la première partie du tableau. Tous les autres boutons agissent comme s'ils fonctionnaient pour la première ligne du tableau.

De plus, j'ai changé le type de bouton de "bouton" à "soumettre". Encore une fois, rien n'a changé.

2
Emre8 8 nov. 2020 à 08:37

1 réponse

Meilleure réponse

Je pense que vous avez attaché l'écouteur d'événement aux éléments ".sendButtonData" avant de créer ces boutons, lorsque vous cliquez sur l'un d'eux, rien ne se passe car l'événement a été attaché aux éléments existants avec ce nom de classe qui sont dans ce cas aucun, mais pas pour les futurs

$('.sendButtonData').click(function () { 
  console.log("button click!");
});

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FEtemplate"></div>

Vous devez donc attacher cet écouteur après avoir créé ces boutons comme celui-ci

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}

$('.sendButtonData').click(function () { 
  console.log("button click!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FEtemplate"></div>

Ou vous pouvez utiliser la délégation d'événement comme ceci

$('#FEtemplate').click(function(e) { 
  // only if the element has that class `sendButtonData`
  // note that in this case we're not checking for the element type to be a button
  if(e.target.className.includes("sendButtonData")) {
    console.log("button click!");
  }
});

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="FEtemplate"></div>
0
SaymoinSam 8 nov. 2020 à 06:01