javascript - Bootstrap Modal 在第二页的 DataTable 中不起作用
问题描述
我有一个表并与数据表一起使用。在表中我使用了引导模式。模态在表格的第一页工作正常,但在第一页后模态不起作用。
我的表代码:
<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');
}
});
});
});
希望这有效:)
推荐阅读
- java - 如何在 Java 中访问 AWS Lambda 回调结果
- javascript - 如果那里有对象,请更改功能
- python - ROS 中是否需要 C++ 和 Python
- mysql - 跟踪当前商店中的物品以及在任何给定月份的商店中的物品
- angularjs - Typescript - 如何为 json 对象创建嵌套接口
- javascript - 预检响应中的 Access-Control-Allow-Methods 不允许方法 PATCH
- php - PHP:在表单提交中获取复选框值和文本字段值
- javascript - javascript 整数数组中可用于获取总值的最少元素
- php - 谷歌浏览器扩展 GMAIL 生成带参数的 URL
- java - java.lang.IllegalArgumentException:在 okhttp3.Headers$Builder.checkNameAndValue