jquery数据表无法从第二页开始工作

Question

我正在使用jquery数据表1.9.4和jquery 1.9.1,我试图在click事件上执行这样的ajax调用.

$(".icon-trash").on('click',function () {
                // alert($(this).attr('id'));
                $.post('/WorkOrderRequest/DeleteWOR',
                        { id: $(this).attr('id') },

                        function (returndata) 
                        {

                            if (returndata.ok) 
                            {
                                window.alert(' deleted!');
                                $("#emp" + idemployee).hide('slow');
                            }
                            else {
                                window.alert(' error : ' + returndata.message);
                            }

                    });

            });

HTML部分:

@foreach (var item in Model)
                    {

                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.ProjectCode)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.WO_Date)
                            </td>


                            <td>
                             <a  id='@(item.WO_ID)' class="icon-edit" />
                               |                               
                             <a  id='@(item.WO_ID)' class="icon-trash" />
                           </td>
                        </tr>
                    }

它在第一页上正常工作,但从第二页开始没有显示任何结果.请帮忙

Answer 1

分页的工作方式,当前页面不需要的行将从DOM中删除.因此,当删除html时,任何直接绑定到这些元素的事件处理程序都将丢失.

您需要使用委托语法on()将处理程序绑定到永久页面中的资产.这可以是父表或树上的任何其他父表,包括document

$('#TableID').on('click','.icon-trash',function () {...

API参考:http://api.jquery.com/on/

Answer 2

如果你只是把你的点击事件代码上面的datatable代码中js,它会正常工作.

例如.

$(".icon-trash").on('click',function () {});

$("#TableID").datatable();