Bootstrap 使用数据表中的分页后模态不显示

Question

我正在使用 Bootstrap 3 和数据 Table 1.9。当我单击数据 table 第一页中的锚标记时，模态打开，但在使用数据 table 分页后显示 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 数据 table 是

$(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')
});
});

Answer 1

问题是您 $(".prod-view").click() 只初始化可见内容，即第 1 页上的行。 dataTables 向 DOM 注入和删除 table 行以显示页面。因此，您必须改用委托事件处理程序：

$("#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">&times;</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);
});

Bootstrap 使用数据表中的分页后模态不显示

Bootstrap modal not showing after using the pagination from the datatable

datatables

twitter-bootstrap