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