我正在使用Bootstrap 3和数据表1.9。当我单击数据表第一页中的anchor标签时，模态已打开，但是在使用数据表分页后显示Bootstrap模态时出现问题。如何解决这个问题。这是我的代码
<html>
<body>
<table id=prodlist class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
</td>
</tr>
<tr><td>
<a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
</td></tr>
<tr><td>
<a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
</td> </tr>
</tbody>
</table>
</body>
</html>
我的数据表JavaScript是
$(function() {
$("#prodlist").dataTable({
"bAutoWidth": false,
"aoColumnDefs": [{
"sWidth": "5%",
"aTargets": [0],
"bSearchable": false,
"bSortable": false,
"bVisible": true
}, ]
});
});
if ($(".alert-success, .alert-error").length > 0) {
setTimeout(function() {
$(".alert-success, .alert-error").fadeOut("slow");
}, 1000);
}
$(document).ready(function(){
$(".prod-view").click(function(){
var href = $(this).attr('href');
$( ".modal-body" ).load( href );
$('#myModal').modal('toggle')
});
});
问题是您$(".prod-view").click()仅初始化可见的内容，即页面＃1上的行。dataTables向DOM插入表格行或从DOM删除表格行，以显示页面。因此，您必须改为使用委托事件处理程序：
$("#prodlist").on("click", ".prod-view", function() {
var href = $(this).attr('href');
$( ".modal-body" ).load( href );
$('#myModal').modal('show') //<-- you should use show in this situation
});
但是正如注释中所建议的那样，模态不是可选的，您不必以编程方式打开它们。只要你有
<a href="#" data-target="#modal" data-toggle="modal">edit</a>
和#modal页面上的
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">This is a modal</h4>
</div>
<div class="modal-body">
<p>modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="submit">submit</button>
</div>
</div>
</div>
</div>
模态将在所有页面上自动初始化。参见演示-> http://jsfiddle.net/9p5uq7h3/
如果您唯一关心的是模态的内容，那么只需
$('body').on('show.bs.modal', function() {
$(".modal-body").load(url/to/modal/template);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句