Impossibile ottenere l'ID del pulsante Bootstrap dal pulsante su una riga della tabella

Question

Sto usando bootstrap e ho pensato che sarei intelligente e cada alcuni pulsanti all'interno di un tavolo.Ahimè, non succede nulla.Cambiamenti di stato del pulsante ma diverso da quello, nessun errore, nessun avviso, nessuna risposta.

La mia tavola abbreviata

<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 per il mio pulsante

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

.

Answer 1

Definisci la funzione all'interno $(document).ready(function ()

Poiché i pulsanti creati dinamicamente al DOM, l'evento Click non sarà disponibile per questi pulsanti.In questo caso, la delegazione degli eventi ti aiuterà a allegare quell'evento.

Prova questo

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

.

demo

Answer 2

Si prega di aggiungere la tua funzione su Dom Ready

Prova questo

    $(function(){

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

     });

.

Controlla la demo qui

Answer 3

Scrivi la tua jQuery in

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

.