在codeigniter中有10条分页数据表记录后,bootstrap modal没有弹出

时间:2018-11-29 13:19:10

标签: php jquery ajax codeigniter bootstrap-modal

在10次数据表分页记录后,Bootstrap模式没有弹出。 我不知道为什么,所以请帮助我。 我曾尝试解决这个问题,但我听不懂。 我不知道有关jquery的想法,所以请给我回答。  这是我的php代码:

<table id="example1" class="table table-bordered table-striped">
<thead>
    <tr>
        <th>Sr No</th>
        <th>Title</th>
        <th>Description</th>
        <th>Status</th>
        <th>Deadline Date</th>
        <th>Add</th>
        <th>Show</th>
    </tr>
</thead>
<tbody>
 <?php
 $str = 1;
 foreach ($getplan as $key => $get) {
    ?>
    <tr>
        <td><?php echo $str; ?></td>
        <td><?php echo $get['title']; ?></td>
        <td><?php echo $get['description'] ?></td>
        <td><?php echo $get['color'] ?></td>
        <td><?php echo $get['end_date'];?></td>
        <td>
            <?php echo $get['members'] ?><br/>
            <a href="<?php echo base_url() . "welcome/get_member_id/" . $get['id'] ?>"<i class="fa fa-plus" aria-hidden="true"></i>Add Member</a>
        </td>

        <td>
            <input type="button" name="view" value="Show" id="<?php echo $get['id'] ?>" class="btn btn-info btn-xs view_data" />
        </td>

    </tr>
    <?php
    $str++;
}
?>

这是我的模态:

<div id="dataModal" class="modal fade">  
<div class="modal-dialog modal-lg">  
    <div class="modal-content">  
        <div class="modal-header">  
            <button type="button" class="close" data-dismiss="modal">&times;</button>  
            <h4 class="modal-title">Employee Tast Details</h4>  
        </div>  
        <div class="modal-body" id="employee_detail"> 
        </div>  
        <div class="modal-footer">  
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
        </div>  
    </div>  
</div>  

这是我的脚本:

<script type="text/javascript">
$(document).ready(function(){   
    $('.view_data').click(function(){  
        var employee_id = $(this).attr("id");
        $.ajax({  
            url:"<?php echo base_url('welcome/show'); ?>",  
            method:"post",  
            data:{employee_id:employee_id},  
            success:function(data)
            {  
                $('#employee_detail').html(data);  
                $('#dataModal').modal("show");  
            }  
        });  
    });  
});  

1 个答案:

答案 0 :(得分:0)

请更改jQuery代码,使用此类单击事件-

$('body').on('click','.view_data',function(){

代替-

$('.view_data').click(function(){

当前,您的点击事件无效。