Question

我正在使用JQuery Datatable申请。我有一个简单的代码，显示我的所有客户端和一个脚本，该脚本在表行的单击时触发。现在，问题是，这适用于第一页，但是，对于所有其他页面，行上的点击事件未被识别。请在下面找到数据表和脚本库的代码。

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

真的很感激任何帮助。感谢。

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中自动执行此操作，但直接的方法是在数据更改时添加click处理程序。

您可以绑定到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

我遇到了同样的问题，这是我在Asp.Net和Jquery中的实现。我在项目模板中有一个网格视图和一个编辑按钮。我正在进行ajax函数调用。您需要使用委托。

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

JQuery Datatables单击事件不适用于除1之外的页面

3 个答案: