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

工作的下一個按鈕的功能將被重新裝入下一個ID的點擊（比如ID 1），但問題是下一步按鈕的功能加載兩個時間的第二次點擊（當前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

我想你應該叫.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); 
 
});