JQuery的数据表mRender按钮 - 我怎么点击按钮

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”我想要得到的单击事件。我试了下面： $('#stlmtddel').click(function(event) { }

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

有什么想法？

Answer 1

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

使用类别stlmtddel而不是ID 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 
});