Não é possível obter o ID do botão de inicialização do botão em uma linha da tabela

Question

Estou usando o Bootstrap e pensei em ser inteligente e colocar alguns botões dentro de uma mesa.Infelizmente, nada acontece.O estado do botão muda, mas fora isso, nenhum erro, nenhum alerta, nenhuma resposta.

Minha tabela abreviada

<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 para meu botão

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

Answer 1

Definir função dentro $(document).ready(function ()

Como seus botões foram criados dinamicamente no DOM, o evento click não estará disponível para esses botões.Neste caso, a delegação de eventos irá ajudá-lo a anexar esse evento.

Experimente isso

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

DEMONSTRAÇÃO

Answer 2

Adicione sua função em Dom Ready

Experimente isto

    $(function(){

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

     });

VERIFIQUE A DEMO AQUI

Answer 3

escreva seu jquery em

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