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