dataTable row button click

Question

I create a dataTable in which I have two column containing < button value="http://.....">. When I click the button, it opens a "jquery dialog". everything works. The problem is that when my dataTable contains several lines (more than five), when I click on the button NEXT for the dataTable to see the following lines, the following lines BUTTON do not respond to my click. Only the front lines button displayed answer my click. What to do?

Here is my dataTable:

$(document).ready(function() {gridGroup = $('#gridUser').dataTable( {
    "bPaginate": true,
    "bLengthChange": false,
    "bSort": true,
    "bFilter": true,
    "bInfo": false,
    "bRetrieve" : true,
    "bAutoWidth": false,
    "iDisplayLength": 5,
    "bUrl": "",                         
    "oLanguage": {
        "sSearch": "<p>Recherche globale:<p> ",
        "oPaginate": {
            "sFirst":    "Debut",
        "sPrevious": "Prec",
        "sNext":     "Suiv",
        "sLast":     "Fin"
    }
    },
    "sDom": '<"H"Tfr>t<"F"ip>',
    'oTableTools': {
    "sSwfPath": "https://www.gmerp.local/app/project/common/public/js/tabletools/media/swf/copy_csv_xls_pdf.swf",
    'aButtons': [
        {
            "sExtends": "copy",
            "sButtonText": "Copier",
            "bShowAll": true,
        },
        {
            "sExtends": "print",
            "sButtonText": "Imprimer",
            "bShowAll": true,
        },
        {   
           'sExtends':    'collection',
       'sButtonText': 'Exporter',
       'aButtons':    [ 'csv', 'xls', 'pdf' ]
        }
    ]
   },
   "bStateSave": false
});

$('#gridUser tbody td button').click(function (){
    //todo
});

});

and the HTML part:

<table cellpadding="0" cellspacing="0" border="1" id="gridUser">
<thead>
    <tr>
        <th>ID</th><th>EMAIL</th><th> </th><th> </th>
    </tr>
</thead>
<tbody>
    <tr align="left"><td>7</td><td>root</td><td><button value="https://localhost/user/session/edituser/7">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/7">Supprimer</button></td></tr>
    <tr align="left"><td>26</td><td>wwwaa</td><td><button value="https://localhost/user/session/edituser/26">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/26">Supprimer</button></td></tr>
    <tr align="left"><td>27</td><td>wwww</td><td><button value="https://localhost/user/session/edituser/27">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/27">Supprimer</button></td></tr>
    <tr align="left"><td>30</td><td>soja</td><td><button value="https://localhost/user/session/edituser/30">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/30">Supprimer</button></td></tr>
    <tr align="left"><td>31</td><td>ss</td><td><button value="https://localhost/user/session/edituser/31">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/31">Supprimer</button></td></tr>
    <tr align="left"><td>32</td><td>sss</td><td><button value="https://localhost/user/session/edituser/32">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/32">Supprimer</button></td></tr>
    <tr align="left"><td>33</td><td>ssss</td><td><button value="https://localhost/user/session/edituser/33">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/33">Supprimer</button></td></tr>
    <tr align="left"><td>34</td><td>sssss</td><td><button value="https://localhost/user/session/edituser/34">Modifier</button></td><td><button value="https://localhost/user/session/deleteuser/34">Supprimer</button></td></tr>
</tbody>            
<tfoot>
    <tr>                        
      <th>ID</th><th>EMAIL</th><th> </th><th> </th>
    </tr>
</tfoot>            
</table>

thank you for your help.

Answer 1

You should delegate event:

$('#gridUser tbody').on('click', 'td button', function (){
    //todo
});

Answer 2

This worked for me with a newer version of DataTable (1.10.9). I was previously using a row click event but changed it to the button as I didn't want row clicks to unintentionally trigger the event handler function

    $table = $('table#summary').DataTable();

    $table.on('click', 'tr', function () {
        var data = $table.row(this).data();
        var taskID = data[0];
    });

Button click example

    $table = $('table#summary').DataTable();

    $table.on('click', 'button.edit-task', function () {
        var closestRow = $(this).closest('tr');
        var data = $table.row(closestRow).data();
        var taskID = data[0];
    });

Answer 3

Try This one

<table id="MyTable" class="table table-bordered table-striped" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><button class="Mybtn">Click me</button></td>
            <td>Hello</td>
        </tr>
    </tbody>
</table>

<script>
    var Dtable;
    $(document).ready(function () {
        Dtable = $("#MyTable").DataTable();
    });


    $('#MyTable').on('click', '.Mybtn', function () {

        var RowIndex = $(this).closest('tr');
        var data = Dtable.row(RowIndex).data();
        alert(data[1]);
    });
</script>