1

我有 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 上单击删除。现在我在构造框上单击“是”。从数据库中删除数据 ID_17，但在删除 ID_17 之后，我的 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

任何想法为什么这个代码循环这样？

谢谢您的帮助

4

2 回答 2

1

你不应该在你的$('.deleteData').click(function(){. 看看这个小提琴，看看我认为你应该如何布局你的代码。请注意，我创建了idData一个全局变量并将您的$('#no').click(function(){和$('#yes').click(function(){代码移到了底部。我的小提琴不工作，因为它没有你所有的包含，但应该告诉你我的意思。

我还将您的掩码移除移动到您的 ajaxsuccess处理程序中，因为您似乎希望在您的 ajax 恢复后运行它。是这样吗？

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

于 2012-10-18T01:15:11.210 回答
1

问题是每次单击deleteData都会将 click 绑定到yesand no，如果单击deleteData两次，则将 click 绑定到yesandno两次，因为它在deleteDataclick 事件中。
因此，为了防止这种行为，您必须将其从内部deleteData事件中删除。

你可以试试这个演示。

  • 键入您想要的绑定数量
  • 点击一些文字
  • 查看它记录值的次数
于 2012-10-18T01:29:56.883 回答