テーブル行のボタンからブートストラップボタンIDを取得できない

Question

ブートストラップを使っていて、私は賢いと思ったと思い、テーブルの中にいくつかのボタンを落とします。Alas、何も起こりません。ボタンの状態が変化しますが、エラーなし、アラートなし、まったく応答なし。

私の短縮テーブル

<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に動的に作成されたため、クリックイベントはこれらのボタンには使用できません。この場合、イベントの委任はあなたがそのイベントを添付するのに役立ちます。

これを試してください

$(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);
      });
});

.