ASP.NET MVC中未觸發DataTable單元格按鈕單擊事件

Question

我在模態對話框中有一個使用AJAX回調的數據表。 但是進入數據表中的單元格按鈕不會觸發jquery事件。 我的代碼如下。 請糾正我，並建議這有什么問題

 $('#orderlist-table-bill').on('click', 'td .orderdetail-bill', function(e) { debugger; e.preventDefault(); var $row = $(this).closest("tr"); // Find the row // var $text = $row.find(".hidden-orderid").val(); //var cell = $(this).closest('td'); var oid = $row.find(".hidden-outletid").val(); var orderid = $row.find('.hidden-orderid').val(); alert('oid=' + oid + '===orderid:' + orderid); }) 

 <table id="orderlist-table-bill" data-page-length="5" class="table table- striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid" aria-describedby="orderlist-table- bill_info"> <thead> <tr> <th>Order No</th> <th>Order Time</th> <th>Order Type </th> <th>Guest</th> <th>Total-Amount</th> <th>Action</th> </tr> </thead> <tbody id="bill-orderlist-tbody"> <tr role="row" class="odd"> <td tabindex="0" class="sorting_1"><input type="hidden" value="1" class="hidden-outletid"><input type="hidden" value="1" class="hidden-orderid"><a href="#">KOT-17-000000001</a></td> <td>04:33 PM </td> <td class="sdate center">TABLE ORDER(T1)</td> <td class="center">3</td> <td class="center">780</td> <td class="center"> <div class="btn-toolbar row-action"> <div class="btn-group"><button class="btn btn-info orderdetail-bill" data-original-title="Details"><i class="icon-ok"> </i>Detail</button></div> </div> </td> </tr> </tbody> </table> 

Answer 1

使用以下代碼：

$('#orderlist-table-bill').on('click', 'td .orderdetail-bill', function(e) {
    var $row = $(this).closest("tr");
    var oid = $row.find(".hidden-outletid").val();
    var orderid = $row.find('.hidden-orderid').val();
    alert('oid=' + oid + '===orderid:' + orderid);
});

https://jsfiddle.net/1jL4togo/