javascript - javascript函数在同一脚本中编写另一个函数后停止工作

我正在做员工休假管理系统。批准和不批准按钮在开始时效果很好。但是在编写代码以相同的方式显示员工详细信息之后，批准和拒绝按钮停止工作。现在，它给出了错误。有谁知道出什么问题了吗？

控制者

//admin approve leave
public function approveLeave() {

    $id = $this->input->post('id');
    $result = $this->Admin_Model->approve($id);

    if(!$result){

        // something went wrong

        $data = array(
            "value" => $id,
            "error" => true,
            "msg" => "something went wrong"
        );

        $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($data));

        return;
    }


    // approved leave

    $data = array(
        "value" => $id,
        "error" => false,
        "msg" => "successfully updated"
    );

    $this->output
    ->set_content_type('application/json')
    ->set_output(json_encode($data));

}

情态的

<!-- 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>

javascript

    <script>

    $(function(){

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


        $('#pendingLeaveRequest').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
    $('.detailButton').on('click', function(){
    var BASE_URL = "http://localhost/employeemgt/index.php/";
        var leave_id = $(this).val();
        var i;
        $.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("<p>" + "Name: " + data[0].user_name + "</p>" +
                                  "<p>" + "Leave Type: " + data[0].leave_type + "</p>"  +
                                  "<p>" + "Start Date: " + data[0].leave_start + "</p>"  +
                                  "<p>" + "End Date: " + data[0].leave_end + "</p>");
            $('#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>

最佳答案

用

$(document).on('click','#declinebtn',function(){})代替$('#declinebtn').click(function(){})。

像这样更改您的视图代码：

<div id="showleave">
<h4 class="mb-4">Pending Requests</h4>
<?php
foreach ($leave as $row) {
    if($row->status != 1)
    {
        ?>

        <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 $row->id; ?>" data-id="<?= $row->id ?>" data-name="<?= $row->user_name ?>" data-toggle="modal" value="<?= $row->id ?>">View Request</button>
                </div>
            </li>
        </ul>
        <?php
    }
}
?>

通过这种方式，我认为您的问题将得到解决