Не могу получить идентификатор кнопки Bootstrap от кнопки на строке таблицы

Question

Я использую Bootstrap и мысль, что я умным и сброшу несколько кнопок внутри стола.Увы, ничего не происходит.Изменения состояния кнопки, но кроме этого, никаких ошибок, отсутствие предупреждений, нет ответа вообще.

мой аббревиатурный стол

<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 для моей кнопки

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

.

Answer 1

Определить функцию внутри $(document).ready(function ()

Поскольку ваши кнопки динамически создаются до DOM, событие Click не будет доступно для этих кнопок.В этом случае делегация событий поможет вам прикрепить это событие.

попробуйте это

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

.

Demo

Answer 2

Пожалуйста, добавьте свою функцию на Dom Ready

попробуйте это

    $(function(){

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

     });

.

Проверьте демонстрацию здесь

Answer 3

Напишите свой jquery в

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

.