jquery data table not working from second page

Question

I am using jquery Data table 1.9.4 and jquery 1.9.1 and i am trying to perform ajax call like this on click event.

$(".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 part:

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

It is working fine on first page but from second page its not showing any result. Please help

Answer 1

The way pagination works, rows not needed by current page are removed from the DOM. Therefore any event handlers you bind directly to those elements are lost when the html is removed.

You need to use delegation syntax of on() to bind the handler to an asset in page that is permanent. This could be the parent table or any other parent up the tree, including document

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

API Reference: http://api.jquery.com/on/