Impossible d'obtenir l'ID du bouton d'amorçage à partir du bouton d'une ligne de tableau

Question

J'utilise Bootstrap et j'ai pensé que je serais intelligent et déposerais quelques boutons dans un tableau.Hélas, rien ne se passe.L'état du bouton change mais à part cela, aucune erreur, aucune alerte, aucune réponse du tout.

Mon tableau abrégé

<table class="table">
    <tr>
        <td>Entry of some sort</td>
        <td><button type="button" class="btn btn-default btn-xs" id="edit_Button">Edit</button></td>
        <td><button type="button" class="btn btn-default btn-xs" id="delete_Button">Delete</button></td>
    </tr>
</table>

jQuery pour mon bouton

$( document ).ready(function() {    
    $(".table .btn").click(function(e){
        e.preventDefault();
        var id = $(this).attr('id');
        alert(id);
    });
});

Answer 1

Définir la fonction à l'intérieur $(document).ready(function ()

Étant donné que vos boutons ont été créés dynamiquement dans le DOM, l'événement click ne sera pas disponible pour ces boutons.Dans ce cas, la délégation d'événement vous aidera à joindre cet événement.

Essaye ça

$(document).ready(function () {
    $(document).on('click', ".table .btn", function (e) {
        e.preventDefault();
        id = $(this).attr('id')
        alert(id);
    });
});

DÉMO

Answer 2

Veuillez ajouter votre fonction sur Dom Ready

Essayez ceci

    $(function(){

        $('body').on('click','.table .btn','',function(e){
          e.preventDefault();
          var id = $(this).attr('id');
          alert(id);
         });

     });

Vérifiez la démonstration ici

Answer 3

écrire votre jQuery dans

$(document).ready(function(){
 //here
      $(".table .btn").click(function(e){
      e.preventDefault();
      id = $(this).attr('id')
      alert(id);
      });
});