数据表格行按钮点击

Question

我创建了一个dataTable，其中有两列包含 < button value="http://.....">。

当我单击按钮时，它会打开一个“jquery对话框”。一切正常。问题在于当我的dataTable包含多行（超过五行）时，当我点击dataTable的下一页按钮以查看以下行时，以下行的按钮不响应我的点击。只有显示的前几行按钮才能响应我的点击。该怎么办？

这是我的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
});

});

以及HTML部分：

<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>

谢谢你的帮助。

- sajreborn

---

请查看旧问题的解决方案：可能是重复问题。 - Vikram Deshmukh

@srvikram13 在重复的链接中，答案使用了已被新版本 jQuery 移除的 .live()。 - A. Wolff

抱歉！我没有检查jQuery的版本。 - Vikram Deshmukh

Answer 1

你应该委托事件：

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

- A. Wolff

---

这是最佳解决方案。 - sajreborn

一种非常优雅的解决方案。使用此方法，您也不必使用dataTables插件中的“initComplete”回调函数。非常感谢。 - Niklas S.

Answer 2

对于更新的DataTable版本（1.10.9），这对我很有用。我之前使用行点击事件，但更改为按钮，因为我不希望行点击不经意地触发事件处理函数。

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

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

按钮点击示例

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

- Carlton

Answer 3

尝试这个。

<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>

- Udara Kasun