Question

我有jquery代码在我的表视图中逐行删除数据。当用户单击“删除”图标时，将弹出“确认”框，并显示“是”和“否”按钮。如果“是”，则该行被删除，如果“否”，则关闭该构造框并且不执行任何操作。问题是，假设我有这样的2行数据： -

<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'>&nbsp;&nbsp;<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'>&nbsp;&nbsp;<img src='image/DocDelete.png' **class='deleteData'** id='**ID_17**'>
    </td>
</tr>

因此，当我在数据1上单击删除时，ID_16将转到jquery代码。比我在构造框上单击“否”。之后，我单击数据2上的删除。现在我在构造框上单击“是”。从DB中删除数据ID_17，删除ID_17后buat，我的jquery将循环并删除ID_16以及我之前尝试删除的所有数据。就像为我在选择框中选择“否”的数据排队删除操作一样。下面是我的jquery代码。

  //.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

为什么这段代码会像这样循环？

感谢您的帮助

Answer 1

您不应该在$('.deleteData').click(function(){中包含所有代码。查看this fiddle，了解我认为您应该如何布置代码。请注意，我已将idData设为全局变量，并将您的$('#no').click(function(){和$('#yes').click(function(){代码移至底部。我的小提琴不起作用，因为它没有你所有的包括，但应该告诉你我的意思。

我还在你的ajax success处理程序中移动了你的掩码删除，因为你似乎想要在你的ajax回来后运行它。是这样的吗？

编辑：您遇到的问题是因为您多次绑定deleteData类的项目。当您运行选择器$('.deleteData').click(时，您说"get each instance of an element with the class 'deleteData' and then bind this function to it."因为您$('#no').click(和$('#yes').click( INSIDE $('.deleteData').click(您绑定了$('#no').click( $('#yes').click( }和{{1}}两次。如果您有三个'deleteData'实例，那么您的ajax代码将运行3次。

Answer 2

问题在于，每当您点击deleteData时，您都会将点击结果绑定到yes和no，如果您点击deleteData两次，则将点击绑定到{{1} }和yes两次，因为它位于no点击事件内因此，为了防止出现这种情况，您必须将其从deleteData事件中删除。

您可以尝试this演示。

键入您想要的数量
点击一些文字
查看记录值的次数

jquery ajax循环没有任何理由

2 个答案: