如何將bootstrap.tooltips插件應用於動態生成的元素？

Question

我正在嘗試使用AJAX feed中的Datatables創建動態td元素。

下面是列中的相關aoColumnDefs：

"aoColumnDefs": [ 
    { 
     "mRender":function(data, type, row) { 
      return '<td class="ms">' + 
         '<div class="btn-group1">' + 
          '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' + 
           '<i class="gicon-edit"></i>' + 
          '</a> ' + 
          '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' + 
           '<i class="gicon-eye-open"></i>' + 
          '</a>' + 
          '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' + 
           '<i class="gicon-remove"></i>' + 
          '</a>' + 
         '</div>' + 
        '</td>'; 
     }, 
     "aTargets":[7] 
    }, 

正如你可以看到我需要處理，這是創建的行後的bootstrap.tooltips插件適用於<a>元素。

以下是我已經試過了，其中包括jQuery選擇的其他組合：

"fnCreatedRow": function(nRow, aData, iDataIndex) { 
    $("a").tooltip(); 
}, 

沒有什麼我試圖在試圖讓插件來增強我的按鈕，並有提示出現在懸停工作過，他們有正確的CSS，因此它們不可見，因爲這個確切的HTML和CSS工作在靜態HTML文件中，而不需要動態創建元素。

Answer 1

我相信你可以通過使用mRender和fnCreatedCell做出提示用Ajax數據源工作。請注意數據表reference page和比較fnCreatedCell與fnCreatedRow。

HTML

<table id="example" class="table table-condensed"> 
    <thead> 
     <tr> 
      <th>Vegetable</th> 
      <th>Fruit</th> 
      <th>Options</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

的JavaScript（或至少調用數據表的相關部分）

$('#example').dataTable({ 
    "aaData": aaData, 
    // other set up for datatables left out for the sake of getting to the main issue... 
    "aoColumnDefs": [ 
     { "aTargets": [0], 
      "mData": "VegetableName", 
      "sWidth": "150px" 
     }, 
     { "aTargets": [1], 
      "mData": "FruitName", 
      "sWidth": "150px" 
     }, 
     { "aTargets": [2], 
      "mData": "LoansOpenedThisDay", 
      "mRender": function (data, type, full) { 
      // Note: 
      // not manually coding the '<td>' as in the question.   
       return '<div class="btn-group1">' + 
          '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' + 
           '<i class="gicon-edit"></i>' + 
          '</a> ' + 
          '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' + 
           '<i class="gicon-eye-open"></i>' + 
          '</a>' + 
          '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' + 
           '<i class="gicon-remove"></i>' + 
          '</a>' + 
         '</div>';    
      }, 
      "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
       // console.log(nTd); 
       $("a", nTd).tooltip(); 
      } 
     } 
    ], 
    // more datatables set up...