Question

我有以下ajax调用：

    $('#stlmtddel').click(function(event) {
        var customerid = "<%=customerid%>";
        var appointofcaid = "<%=appointofcaid%>";
        var kindcontrolid = "<%=kindcontrolid%>";
        var auditorid = "<%=auditorid%>";
        var instype = "view";

        $.ajax({
                 type: 'GET',
                 url: 'crudsettlement.jsp',
                 data: {
                     Wcustomerid: customerid,
                     Wappointofcaid: appointofcaid,
                     Wkindcontrolid: kindcontrolid,
                     Wauditorid: auditorid,
                     Winstype: instype
                 },
                 async: false,
                 dataType: 'json',
                 success: function(json) {

                     $('#settlementsd').DataTable({
                         destroy: true,
                         "stateSave": true,
                         "displayLength": 10,
                         "lengthMenu": [
                             [10, 25, 50, 100, -1],
                             [10, 25, 50, 100, "όλα"]
                         ],
                         "pagingType": "full_numbers",
                         "language": {
                             "emptyTable": "Δεν βρέθηκαν δεδομένα",
                             "thousands": ".",
                             "lengthMenu": "Εμφάνιση _MENU_ εγγραφών ανά σελίδα",
                             "zeroRecords": "Δεν βρέθηκαν εγγραφές - ",
                             "info": "Εμφανίζονται οι εγγραφές _START_ έως _END_ από σύνολο _TOTAL_",
                             "infoEmpty": "Εμφανίζονται οι εγγραφές 0 έως 0 από σύνολο 0",
                             "infoFiltered": "(Εφαρμόστηκε φίλτρο σε σύνολο _MAX_ εγγραφών)",
                             "search": "Αναζήτηση:",
                             "paginate": {
                                 "first": "Αρχή",
                                 "previous": "Προηγούμενη",
                                 "next": "Επόμενη",
                                 "last": "Τέλος"
                             }
                         },
                         "aaData": json,
                         "aoColumns": [{
                             "mData": "auditoridid"
                         }, {
                             "mData": "auditoridname"
                         }, {
                             "mData": "sdpaymentnet"
                         }, {
                             "mData": "sdpaymenttax"
                         }, {
                             "mData": "sdpayment"
                         }, {
                             "bSortable": false,
                             "mRender": function(data, type, row) {
                                 return '<input type="hidden" name="Wauditordid" class="Cauditordid" value="'+row.auditoridid+'" disabled><button type="submit" id="stlmtddel" class="btn btn-danger" formnovalidate><span class="glyphicon glyphicon-minus"></span>';
                             }
                         }, ]
                     });
                     alert(json.msg);
                 }

             });
   });

在mRender中我创建了一个带有id =“stlmtddel”的按钮，我想获得click事件。我尝试了以下方法： $('#stlmtddel').click(function(event) { }

但不适用于所有行。例如，如果表有3行，我试图单击以删除其中一行，这工作正常。之后，该表有2行，当我尝试单击以删除其中一行时，则单击事件不起作用。

有什么想法吗？

Answer 1

根据HTML规范ID must be unique。由于有三个具有相同ID的按钮，因此$("#stlmtddel")仅匹配第一次出现，因此点击事件仅适用于第一个按钮。

使用课程stlmtddel代替stlmtddel，因为ID在网页中必须是唯一的。

 $('#settlementsd').DataTable({
     ...
     "aoColumns": [
         ...
         {
             "bSortable": false,
             "mRender": function(data, type, row) {
                   return '<input type="hidden" name="Wauditordid" class="Cauditordid" value="'+row.auditoridid+'" disabled><button type="submit" class="stlmtddel btn btn-danger" formnovalidate><span class="glyphicon glyphicon-minus"></span>';
              }
          }
     ]
 });

之后，您可以通过点击#settlementsd

上的点击事件来聆听按钮点击

$('#settlementsd').on('click', '.stlmtddel', function() {
    // Button click logic goes here
});

Answer 2

如果要使用mRender的回调，则可以尝试使用数据表fnRowCallback。

https://datatables.net/examples/advanced_init/row_callback.html

JQuery DataTables mRender按钮 - 如何点击按钮

2 个答案: