jquery ajax loop error

Question

I have 10 delete button(#deletebutton0 to #deletebutton9) for every delete data(deleteid0,deleteid1,...,deleteid9)..If i am clicking #deletebutton0, deleteid0 has to be deleted. and so on..

for(i=0;i<9;i++)
 {
   $("#deletebutton"+i).click(function(e) {
   e.preventDefault();
   var deleteid = $("#deleteid"+i).val();

  var dataString ='delete_id='+deleteid;

  $.ajax({
   type:'POST',
   data:dataString,
   url:'deletecodepage.php',
   success:function(data) {
   $("#education-section").html(data);
   $("#education-section").show();
   }
  });
 });
 }

I think you need to get rid of your event handler, it only needs to be bound once and doesnt seem relevent here.This stuff.. $("#deletebutton"+i).click(function(e) { e.preventDefault(); — kurt, Sep 05 '15 at 14:35
It is not very clear what you're trying to achieve. Are you trying to bind a 'click' event to each delete button? That would make it that the ajax post will fire, whenever the user clicks any of the buttons. Or are you trying to automatically 'click' each button, and execute that function in one swoop, for each of the buttons? — Olivier De Meulder, Sep 05 '15 at 15:48

guest271314 · Answer 1 · 2015-09-05T15:24:13.527

Try removing for loop , attaching click event to $("[id^=deletebutton]") selector. See Attribute Starts With Selector [name^="value"]

$("[id^=deletebutton]").click(function(e) {
  e.preventDefault();
  var deleteid = $(this).val();    
  var dataString ='delete_id='+deleteid;

  $.ajax({
   type:'POST',
   data:dataString,
   url:'deletecodepage.php',
   success:function(data) {
   $("#education-section").html(data);
   $("#education-section").show();
   }
  });
 });

$("[id^=deletebutton]").click(function(e) {
  e.preventDefault();
  var deleteid = $(this).val();    
  var dataString ='delete_id='+deleteid;
  console.log(deleteid, dataString)
  /*
  $.ajax({
   type:'POST',
   data:dataString,
   url:'deletecodepage.php',
   success:function(data) {
   $("#education-section").html(data);
   $("#education-section").show();
   }
  });
  */
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="0" id="deletebutton0" />
<input type="button" value="1" id="deletebutton1" />
<input type="button" value="2" id="deletebutton2" />
<input type="button" value="3" id="deletebutton3" />
<input type="button" value="4" id="deletebutton4" />
<input type="button" value="5" id="deletebutton5" />
<input type="button" value="6" id="deletebutton6" />
<input type="button" value="7" id="deletebutton7" />
<input type="button" value="8" id="deletebutton8" />
<input type="button" value="9" id="deletebutton9" />

jquery ajax loop error

1 Answers1