[英]Bootstrap Modal Not working in DataTable From Second page
我有一個表並與數據表一起使用。 在表中我使用了引導模式。 模態在表格的第一頁中工作正常,但在第一頁后模態不起作用。
我的表代碼:
<table id="myTable" class="table table-striped">
<tr>
<td>
<a data-id="<?php echo $row['id']; ?>" class='userinfo'><i class="mdi mdi-account-edit"></i></a>
</td>
</tr>
</table>
我的數據表調用插件
$(".userinfo").on('click',function () {});
$(document).ready(function (){
var table = $('#myTable').dataTable({
dom: 'l<"toolbar">frtip',
initComplete: function(){
$("div.toolbar").html('<button type="button" data-toggle="modal" data-target="#add_staff"><span>Add New Staff</span><i style="margin-left: 2px;" class="fas fa-user-plus"></i></button>');
}
});
});
我的模態調用腳本
$(document).ready(function(){
$('.userinfo').on('click',function(){
var userid = $(this).data('id');
$.ajax({
url: 'inc/edit_staff_modal.php',
type: 'post',
data: {userid: userid},
success: function(response){
$('.mod').html(response);
$('#empModal').modal('show');
}
});
});
});
這是引導程序的模式
<div class="modal fade" id="empModal" role="dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body mod"></div>
</div>
</div>
</div>
在edit_staff_modal.php 中,我只是調用usedrid 並獲取數據。 這段代碼在數據表的第 10 行數據中工作得很好。 但是當我進入第二頁時,這個模式不起作用,我搜索了幾個博客和堆棧並關注了它們但沒有解決。 我能解決這個問題嗎。
請更新以下代碼以使用 jquery主體選擇器綁定您的主要點擊事件
$(document).ready(function(){
$("body").on("click", ".userinfo", function(event){
var userid = $(this).data('id');
$.ajax({
url: 'inc/edit_staff_modal.php',
type: 'post',
data: {userid: userid},
success: function(response){
$('.mod').html(response);
$('#empModal').modal('show');
}
});
});
});
希望這有效:)
我只是把這個代碼
$(document).on('click', '.userinfo', function(e) {
而不是這個代碼。
$('.userinfo').on('click',function(){
在第二頁和更多頁上,一切對我來說都很好。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.