jquery ajax loop with no reason - php

Question

I have jquery code to delete data row by row in my table view. When the user click delete icon, conformation box is popup and have "Yes" and "No" button. If "Yes" the row is delete, if "No" close the conformation box and do nothing. The problem is, let say I have 2 row data like this:-
<tr bgcolor=#ACACAC id='ak1'>
<td align='center'>1.</td>
<td>Data 1</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td align='center'>
<img src='image/DocEdit.png' class='editData' id='ID_16'> <img src='image/DocDelete.png' **class='deleteData'** id='**ID_16**'>
</td>
</tr>
<tr bgcolor=#6D6D6D id='ak1'>
<td align='center'>2.</td>
<td>Data 2</td>
<td></td>
<td></td>
<td></td>
<td align='center'>
<img src='image/DocEdit.png' class='editData' id='ID_17'> <img src='image/DocDelete.png' **class='deleteData'** id='**ID_17**'>
</td>
</tr>
So, when I click delete on Data 1, the ID_16 is past to jquery code. Than I click "No" on conformation box. After that, I click delete on Data 2. Now I click "Yes" on conformation box. Data ID_17 deleted from DB, buat after delete ID_17, my jquery will loop and delete ID_16 and all the data that I try to delete before. It's like queue the delete action for the data that I choose "No" on conformation box. Below is my jquery code.
//.deleteData is class for delete button
$('.deleteData').click(function(){
var idData=$(this).attr('id'); //get data id to delete
//Fade in the Popup for conformation delete
$('#cfm-box').fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($('#cfm-box').height() + 24) / 2;
var popMargLeft = ($('#cfm-box').width() + 24) / 2;
$('#cfm-box').css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
//if button no click, do nothing
//#no refer to the button ID no.
$('#no').click(function(){
$('#mask , .cfm-popup').fadeOut(300 , function() {
$('#mask').remove();
});
});//end #no
//if yes click, delete data from db
//#yes refer to the button ID yes.
$('#yes').click(function(){
//parameter to send for delete WHERE statement
var tahun = $('#tahunSemasa').val();
var suku = $('#sukuSemasa').val();
var dataString = "tahun="+tahun+"&suku="+suku+"&id="+idData+"&action=delete";
$.ajax({
type: "POST",
url: "prestasiProses.php",
data: dataString,
cache: false,
success: function(html)
{
alert(html);
if(html=='true')
{
window.location.href="main.php?a=31&tahun="+tahun+"&suku="+suku+"&act=delete";
}
else
{
alert("Failed!");
}
}
});
$('#mask , .cfm-popup').fadeOut(300 , function() {
$('#mask').remove();
});
});//end #yes
});//end .deleteData
Any ideas why this code loop like that?
Thanks for the help

Answer 1

You shouldn't have all that code inside your $('.deleteData').click(function(){. Check out this fiddle to see how I think you should have your code laid out. Notice that I have made the idData a global variable and moved your $('#no').click(function(){ and $('#yes').click(function(){ code to the bottom. My fiddle isn't working because it doesn't have all your includes, but should show you what I mean.
I also moved your mask removal inside your ajax success handler as it seems like you want that to run once your ajax comes back. Is that the case?
EDIT:
The problem you are having is because you are binding to items with the deleteData class multiple times.
When you run the selector $('.deleteData').click(, you are saying, "get each instance of an element with the class 'deleteData' and then bind this function to it." Since you then had the $('#no').click( and $('#yes').click( INSIDE your $('.deleteData').click( you were binding your $('#no').click( and $('#yes').click( twice. If you had three instances of the 'deleteData', your ajax code would have run 3 times.

Answer 2

The problem is that everytime you click deleteData you will bind click to yes and no, to if you click deleteData twice, you bind click to yes and no twice, because it's inside deleteData click event.
So, to prevent this behaviour you have to remove it from inside deleteData event.
You can try this demo.
Type how many binds do you want
Click some text
See how many times it logs the value