Question

我有一个在模态对话框中使用AJAX回调的数据表。但是在datatable中的单元格按钮中没有激活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/

在asp.net mvc中，DataTable单元格按钮单击事件不会触发

1 个答案: