在-點擊：禁用和修改內部數據表

用戶點擊按鈕，這裏面一DataTable
坐在按鈕禁用和'它的文本改變管理'爲Font Awesome圖像範圍內的動畫圖標。
發送Ajax請求，並在成功時彈出一個模式並顯示新的對話框。
該按鈕恢復爲原始形式。

步驟1和3工作正常，它是2和4，給我一些問題。我知道我需要使用委託事件處理程序修改DataTable中的特定按鈕，此時頁面上沒有任何更改。應該指出的是，該網站使用Bootstrap。

下面是從數據表與我的按鈕列：

"columns": [ 
     ... 
     { 
      "width": "8%", 
      "searchable": false, 
      "className": "customStyling", 
      "render": function() { 
       return '<button style="width: 75px" class="btn btn-primary">Manage</button>'; 
      } 
     } 
    ]

我的onclick事件：

$('#myTable tbody').on('click', 'button', function (e) { 
    // disable button & change text 
    $(this).prop("disabled",true); 
    $(this).text('<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>'); 

    // get data from the relevant row 
    var row = myTable.row($(this).closest('tr')); 
    var data = row.data(); 

    ... AJAX REQUEST ... 
    ... MODAL APPEARS ... 

    // enable button, change text back 
    $(this).prop("disabled", false); 
    $(this).text('Manage'); 
});

任何援助深表感謝。

來源

2017-09-06 rjmd

作爲備註：替換'$（本）的.text（' '（this）.html（''）l'在你的第2步 – diavolic

謝謝@diavolic突出顯示這個錯誤 – rjmd

「這」不可用成功回調內部，$(this).prop("disabled", false);將無法正常工作，「這」必須發送Ajax，檢查段之前被保存到一個變量（它是一個測試AJAX API，響應速度快）

$('button').click(function(){ 
 
//save "this" to a variable button 
 
var button = this; 
 
$(button).html('<i class="fa fa-circle-o-notch fa-spin"></i>'); 
 
$.ajax({ 
 
url:'https://jsonplaceholder.typicode.com/photos', 
 
success:function(data){ 
 
    $(button).html('Manage'); 
 
} 
 
}); 
 

 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button>Manage</button>

來源

2017-09-06 04:27:12

我看到我沒有說清楚。在完整的代碼中，最後兩行代碼位於成功和錯誤回調的內部，我剛剛刪除了AJAX以減少不必要的代碼。 – rjmd

$（this）.text轉義html字符，plz使用$（this）.html代替，@Alive來提到這一點，我認爲他的回答是你的解決方案 –

理解了這個問題，這是因爲你正在使用「** this **「裏面的成功回調，檢查我編輯的答案 –

在-點擊：禁用和修改內部數據表

回答

相關問題