Question

function open_appointment(id)
{
save_method = 'open_appointment';
$('#form_open_appointment')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string

//Ajax Load data from ajax
$.ajax({
    url : "<?php echo site_url('ReceptionistController/ajax_edit_appointment')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {

        $.ajax({
            url : "<?php echo site_url('ReceptionistController/ajax_edit_patient')?>/" +data.ap_patient, 
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {

                $('[name="pt_id"]').val(data.pt_id);
                $('[name="pt_name"]').val(data.pt_name);
                $('[name="pt_dob"]').val(data.pt_dob);
                $('[name="pt_sex"]').val(data.pt_sex);
                $('[name="pt_contact"]').val(data.pt_contact);
                $('[name="pt_email"]').val(data.pt_email);
                $('[name="pt_address"]').val(data.pt_address);
                id=parseInt(id);
                var next_id=id+1;
                var previous_id=id-1;
                //button to call back the function with next id
                $('#next_patient').click(function() {
                alert("next"+next_id);
                open_appointment(next_id);
                });
               //button to call back the function with previous id
                $('#previous_patient').click(function() {
                alert("next"+next_id);
                open_appointment(previous_id);
                });

            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Failed');

            }
        });

        $('#modal_open_appointment').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Open Appointment'); // Set title to Bootstrap modal title

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
  });
 }

单击下一个按钮，该函数将重新加载下一个id（比如id 1）但问题是On第二次单击下一个按钮，该函数加载两次（当前id和下一个id表示id 1和2）并且为了第三次点击它加载三次（加载ID为id 1 id 2和id 3）。我希望它只是每次点击的最后一个ID

Answer 1

试

var next_id=1;
var previous_id=1;
function open_appointment(id)
{
save_method = 'open_appointment';
$('#form_open_appointment')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string

//Ajax Load data from ajax
$.ajax({
    url : "<?php echo site_url('ReceptionistController/ajax_edit_appointment')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {

        $.ajax({
            url : "<?php echo site_url('ReceptionistController/ajax_edit_patient')?>/" +data.ap_patient, 
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {

                $('[name="pt_id"]').val(data.pt_id);
                $('[name="pt_name"]').val(data.pt_name);
                $('[name="pt_dob"]').val(data.pt_dob);
                $('[name="pt_sex"]').val(data.pt_sex);
                $('[name="pt_contact"]').val(data.pt_contact);
                $('[name="pt_email"]').val(data.pt_email);
                $('[name="pt_address"]').val(data.pt_address);
                id=parseInt(id);
                next_id=id+1;
                previous_id=id-1;
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Failed');

            }
        });

        $('#modal_open_appointment').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Open Appointment'); // Set title to Bootstrap modal title

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
  });
 }



$(document).on('click','#next_patient',function() {
    alert("next="+next_id);
    open_appointment(next_id);
});
//button to call back the function with previous id
$(document).on('click','#previous_patient',function() {
    alert("previous="+previous_id);
    open_appointment(previous_id);
});

Answer 2

我认为你应该在将click事件绑定到按钮之前调用.unbind（）。

$('#next_patient').unbind().bind('click', function() {
    alert("next"+next_id);
    ...
})

Answer 3

function open_appointment(id)
{
save_method = 'open_appointment';
$('#form_open_appointment')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string

//Ajax Load data from ajax
$.ajax({
    url : "<?php echo site_url('ReceptionistController/ajax_edit_appointment')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {
        $.ajax({
            url : "<?php echo site_url('ReceptionistController/ajax_edit_patient')?>/" +data.ap_patient, 
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {
                $('[name="pt_id"]').val(data.pt_id);
                $('[name="pt_name"]').val(data.pt_name);
                $('[name="pt_dob"]').val(data.pt_dob);
                $('[name="pt_sex"]').val(data.pt_sex);
                $('[name="pt_contact"]').val(data.pt_contact);
                $('[name="pt_email"]').val(data.pt_email);
                $('[name="pt_address"]').val(data.pt_address);
                id=parseInt(id);
                var next_id=id+1;
                var previous_id=id-1;
               
              // ****************************************
               // move out 2 event out function
               // set value next_id & prev_id to html tag 
    
              $('#next_patient').attr('data-next',next_id);
              $('#previous_patient').attr('data-prev',previous_id);
                
             //*****************************************

            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Failed');

            }
        });
        // show bootstrap modal when complete loaded
        $('#modal_open_appointment').modal('show'); 
        
       // Set title to Bootstrap modal title
        $('.modal-title').text('Open Appointment');

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
  });
 }


//button to call back the function with next id
$('#next_patient').click(function() {
  
  //recevice value & convert to number ***
  var next_id = Number($(this).attr('data-next')); 
  
  open_appointment(next_id);
});

//button to call back the function with previous id
$('#previous_patient').click(function() {
  
  //recevice value & convert to number ***
  var prev_id = Number($(this).attr('data-prev'));
  
  open_appointment(prev_id);
});

Ajax调用无法使用onclick

3 个答案: