與數據表和自舉模式

Question

工作，我有一個的dataTable有200多條記錄，其中每行有按鈕，刪除該記錄，當按鈕從按下一個模式引導彈出。

問題是，當我用dataTable中的分頁選項更改「頁面」時，模式中的信息沒有被相應的ID更新。當我點擊第一頁中的任何一行時，它都可以正常工作，但是當我更改頁面時，信息會從第一頁按下的最後一個ID中刪除。

任何想法？

彌代碼如下所示：

<table class="table table-bordered table-hover tablewithtooltip" id="dataTable"> 
    <thead> 
    ... 
    </thead> 

    <tbody> 
    <tr> 
     <td> 
     <a href="#myModal" role="button" class="btn delete-smt-btn" data-toggle="modal" id="111">Delete Row</a> 
     </td> 
     <td>Some info</td> 
    </tr> 

    <tr> 
     <td> 
     <a href="#myModal" role="button" class="btn delete-smt-btn" data-toggle="modal" id="112">Delete Row</a> 
     </td> 
     <td>Some info</td> 
    </tr> 

    ... 

    </tbody> 
</table> 

這是我的jQuery：

$('body').on('hidden', '#myModal', function() { 
    $(this).removeData('modal'); 
}); 

var table = $('#dataTable').dataTable({ 
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap", 
    "aaSorting": [[ 3, "asc" ]], 
    "oLanguage": { 
     "sLengthMenu": "Mostrar _MENU_ registros por página" 
    } 
}); 

$('.delete-smt-btn').on('click', function(e){ 
    id = e.currentTarget.id; 
    url = "mypage.com/something?p_something=" + id; 

    $('#myModal').modal({ 
     remote : url 
    }); 
    $('#myModal').removeData(); 
}); 

// I have some tooltips on my table, and I was having kind of the same issue when 
// I changed pages with dataTable, the tooltip wasnt showing and I solved it with 
// this but I cant make it work with modal. 

    table.$('[rel="tooltip"], [data-toggle=tooltip]').tooltip({ 
     html: true 
    }).click(function(e) {e.preventDefault();}); 

Answer 1

嘗試連接一個委託事件監聽到你的表。當表最初呈現時，事件處理程序正在附加到按鈕上，但當您翻閱表時，這些按鈕將被銷燬並創建新的按鈕。這些新按鈕是在分配處理程序後創建的，因此它們不會偵聽click事件。

對於像這樣的情況，使用委託事件偵聽器也是最佳實踐，在這種情況下，您有許多元素在同一個事件上觸發相同的功能。委託事件只分配一個處理程序，否則你要分配每個元素一個處理程序，這將影響內存/性能

$('#dataTable').on('click', '.delete-smt-btn', function(e){ 
    id = e.currentTarget.id; 
    url = "mypage.com/something?p_something=" + id; 

    $('#myModal').modal({ 
     remote : url 
    }); 
    $('#myModal').removeData(); 
}); 

Answer 2

這裏是最通用的解決方案 Plunker

$('#myModal').on('hidden', function() { 
    $(this).removeData('modal'); 
});