循环此ajax调用

Question

On my invoice form, users have the ability to click on a button to add as many parts as the want and then the code below automatically fills in the part description and part price.

I tried to loop it but its not working, instead i added multiple scripts for partnumber1, partnumber2, partnumber3 etc.

<script type="text/javascript">

$( "#partstable" ).on( 'blur keyup', "#partnumber" , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;

   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){ 

result = String(html).split("|"),

$("#partdescription").val(result[0]);
$("#partprice").val(result[1]);

showlabel ();

         }
       });    
   }
   return false;
});

</script>

2nd one

<script type="text/javascript">

$( "#partstable" ).on( 'blur keyup', "#partnumber1" , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;

   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){ 

result = String(html).split("|"),

$("#partdescription1").val(result[0]);
$("#partprice1").val(result[1]);


showlabel ();

         }
       });    
   }
   return false;
});

</script>

3rd

<script type="text/javascript">

$( "#partstable" ).on( 'blur keyup', "#partnumber2" , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;


   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){

result = String(html).split("|"),


$("#partdescription2").val(result[0]);
$("#partprice2").val(result[1]);

showlabel ();

         }
       });    
   }
   return false;
});

</script>

This is how i tried to loop it but again its not working

<script type="text/javascript">

var count = 0;
$( "#partstable" ).on( 'blur keyup', "#partnumber"+count , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;

   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){ 

result = String(html).split("|"),

var counter=0;
loop{
$("#partdescription"+counter).val(result[0]);
$("#partprice"+counter).val(result[1]);
counter++;
}

showlabel ();

         }
       });    
   }
   return false;
});

</script>

Answer 1

I think your problem is that the count variable will have the value after the last execution. Here is an experiment to verify (link):

for (var count = 0; count < 3; count++) {
  $('#btn' + count).on('click', function() {alert(count);});
}

Assuming there are 3 buttons with ids btn0, btn1 and btn2, but no matter which button you click the alert will always show 3 (the value after the loop finishes).

One ugly workaround is to create the function with the Function function (link):

Function("alert(" + count + ");")

Or you can create an anonymous function (link):

for (var count = 0; count < 3; count++) {
 (function(count) {
  $('#btn' + count).on('click', function() {alert(count);});
 })(count);
}