时间戳

首页 > 解决方案 > 在同一脚本标签中编写另一个方法后，Javascript 方法停止工作

javascript - 在同一脚本标签中编写另一个方法后，Javascript 方法停止工作

问题描述

我已经在 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>

标签： javascriptphpcodeignitermodal-dialog

解决方案

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

让我知道它是否有效..

推荐阅读