JQuery datatables click event does not work for pages except 1

Question

I am using jQuery Datatable for my application. I have a simple code that displays all my clients and a script that runs by clicking a row in a table. Now the problem is that this works fine for the first page, however, for all other pages, the click event on the line is not identified. Below is the code for datatable and script data library.

// viewAllClients.php

<table id="view_all_entries" >
    <thead>
    <tr>
        <th>Name</th>
        <th>City</th>
    </tr>
</thead>
<tbody>
    <?php 
    $values = Client::all();
    foreach ($values as $value)
        {?>
<tr class="options" data-val="{{$value->name}}" data-id="{{$value->id}}">
        <td>{{$value->name}}</td>
        <td>{{$value->city}}</td>
        </tr>
    <?php }
    ?>  
</tbody>
</table>

//default.js

$('#view_all_entries').DataTable( {
            "aaSorting": [[ 2, "desc" ]],
            "iDisplayLength": 30,
            "sPaginationType": "full_numbers"
        } );

$('#view_all_entries .options').click(function(){
var id = $(this).closest('tr').data('id');
document.location.href = $('#route_path').val()+'/'+id + '/edit';
});

Any help would be really appreciated. Thank.

Answer 1

, , Halcyon, , . , , .

//default.js    
$('body').delegate('#view_all_entries .options', 'click', function () {
  var id = $(this).closest('tr').data('id');
  document.location.href = $('#route_path').val()+'/'+id + '/edit';
});

Answer 2

$('#view_all_entries .options') DOM, . DOM. , , click.

, JQuery, , .

page , , : https://datatables.net/release-datatables/examples/advanced_init/dt_events.html

exmaple: https://datatables.net/release-datatables/examples/advanced_init/row_callback.html

Answer 3

I had the same problem and this is my implementation in Asp.Net and jQuery. I have a grid view and an “Edit” button inside an element template. I am making an ajax function call. You need to use a delegate.

<asp:GridView ID="GrdRegPeople" runat="server" class="display table table-hover table-condensed" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" ClientIDMode="Static" OnPageIndexChanging="GrdRegPeople_PageIndexChanging">
  <Columns>
      <asp:BoundField ItemStyle-Width="50px" DataField="Reg_id" HeaderText="Reg.ID">
          <ItemStyle Width="50px" />
      </asp:BoundField>
      <asp:BoundField ItemStyle-Width="200px" DataField="Name" HeaderText="Name">
          <ItemStyle Width="200px" />
       </asp:BoundField>
      <asp:BoundField ItemStyle-Width="50px" DataField="Reg_email" HeaderText="Email">
           <ItemStyle Width="50px" />
      </asp:BoundField>
      <asp:BoundField ItemStyle-Width="50px" DataField="CompanyName" HeaderText="Company">
           <ItemStyle Width="50px" />
      </asp:BoundField>
      <asp:BoundField ItemStyle-Width="50px" DataField="Reg_position" HeaderText="Position">
           <ItemStyle Width="50px" />
      </asp:BoundField>
      <asp:TemplateField ShowHeader="false">
           <ItemTemplate>
               <asp:Button ID="Button1" class="btn btn-primary activeButton" ClientIDMode="Static" runat="server" Text="Edit" />
           </ItemTemplate>
      </asp:TemplateField>
</Columns>
<PagerStyle HorizontalAlign="Right" />

 $("body").delegate("#GrdRegPeople .activeButton", "click", function (e) {
            //Write Your Code here..
                                }
        });