Ajax调用不适用于onclick

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');
    }
  });
 }

On click of next button the function is reloaded with the next id (say id 1) But the Problem is On second time click of the next button the function load two time (with current id and with next id say id 1 and 2 ) and for third click it load three time (load id say id 1 id 2 and id 3) . i want it to be only the last id on each click

Answer 1

try

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

I think you should call .unbind() before you bind click event to buttons.

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