在同一脚本标签中编写其他方法后，Javascript方法停止工作

Question

我已经在codeigniter框架上编写了代码，用于批准和拒绝员工请假。之前的批准和不批准效果很好。但是，当我在同一脚本标记中编写了另一种方法来显示员工的请假详细信息后，批准和不批准就停止了工作。为了使两个按钮正常工作，我可以更改什么。这两个按钮也在模态中。

javascript

    <script> 

    $(function(){

    var BASE_URL = "http://localhost/employeemgt/index.php/";


        $('#pedingLeaveRequest').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var current_leave_id = button.data('id');
            var modal = $(this);

            modal.find('input[name="current_leave_id"]').val(current_leave_id); 
        });     



        //approve button
        $('#approvebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/approveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){                       
                    alert('try again');
                }else{
                    alert('Leave has been approved!');
                }
            });              
        });



       //disapprove button
        $('#declinebtn').click(function(){              
            var id = $('input[name="current_leave_id"]').val();
            $.post(BASE_URL +  'admin/AdminDashboardController/disapproveLeave', 

                {'id': id}, 
                function(result){
                    console.log(result);
                if(result.error){                       
                    alert('try again');
                }else{
                    alert('Leave has been disapproved!');
                }
            });              
        });

    });

    //show leave details on modal
    $("#showleave").on('click','button',function(event){
    var BASE_URL = "http://localhost/employeemgt/index.php/";
        var leave_id = $(this).val();
        $.ajax({
            type: 'POST',
            dataType: "JSON",
            data:{leave_id:leave_id},
            url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

        success:function(data){                 
            console.log(data);
            $('#leave_details').html(data);       
            $('#pendingLeaveRequest').modal('show');
       },
       error:function(error){
            alert(error);
        }});
    });


</script>

视图：

                    <div id="showleave">
                <h4 class="mb-4">Pending Requests</h4>
                    <?php
                        foreach ($leave as $row) {  
                        if($row->status != "1")
                         {                          
                            echo '
                            <ul class="list-unstyled">
                                <li class="media border-bottom border-top py-3">
                                    <img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image">
                                    <div class="media-body">
                                      <h5 class="mt-0 mb-1">'.$row->user_name.'</h5>
                                      <p class="mb-0 mt-0">'.$row->leave_start.' to '.$row->leave_end.'</p>
                                      <p class="mt-0">'.$row->leave_type.'</p>
                                      <button type="button" class="detailButton" href="<?php echo $id; ?>" data-id="'.$row->id.'" data-name="'.$row->user_name.'" data-toggle="modal" value="'.$row->id.'">View Request</button>
                                    </div>
                                </li>               
                            </ul>
                            ';
                        }
                        }
                    ?>
                </div>

情态的

<!-- Modal -->
    <div class="modal fade" id="pendingLeaveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Leave Request</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="leave_details" >
            <p> </p>
          </div>
          <div class="modal-footer">
            <input type="hidden" name="current_leave_id" id="current_leave_id" value="" />
            <button type="button" id="declinebtn" class="btn btn-secondary" data-dismiss="modal">Decline</button>
            <button type="button" id="approvebtn" class="btn btn-primary">Approve</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

当您$('#pendingLeaveRequest #leave_details').html(data);用新数据替换时，该按钮将无法使用。尝试将其替换为新ID。...

//show leave details on modal
//$("#showleave").on('click',function(){
$('.detailButton').on('click', function(){
var BASE_URL = "http://localhost/employeemgt/index.php/";
    var leave_id = $(this).val();
    $.ajax({
        type: 'POST',
        dataType: "JSON",
        data:{leave_id:leave_id},
        url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

    success:function(data){                 
        console.log(data);
        $('#leave_details p').html(data);       
        $('#pendingLeaveRequest').modal('show');
   },
   error:function(error){
        alert(error);
    }});
});

让我知道它是否有效。