Работа с DataTables и Bootstrap модальный

Question

У меня есть DataTable с 200+ записи, в которых каждая строка есть кнопка, чтобы удалить эту запись, когда нажата кнопка модальное из Bootstrap выскочит.

Проблема заключается в том, что я изменяю «страницу» с помощью параметра разбиения на страницы из dataTable. Информация внутри модала не обновляется соответствующим идентификатором. Когда я нажимаю любую строку с первой страницы, она работает нормально, но когда я меняю страницу, это когда информация застревает с последним 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'); 
});