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 は DB から削除されましたが、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バインドし、 2回クリックするyesと、クリックイベント内にあるため、クリックを2回バインドすることです。したがって、この動作を防ぐには、イベント 内から削除する必要があります。nodeleteDatayesnodeleteData
deleteData

このデモを試すことができます。

  • 必要なバインドの数を入力します
  • テキストをクリックしてください
  • 値をログに記録する回数を確認する
于 2012-10-18T01:29:56.883 に答える
1

内にすべてのコードを含めるべきではありません$('.deleteData').click(function(){。このフィドルをチェックして、コードをどのように配置する必要があるかを確認してください。idDataグローバル変数を作成し、コードを一番下に移動した$('#no').click(function(){こと$('#yes').click(function(){に注意してください。すべてのインクルードが含まれていないため、私のフィドルは機能していませんが、私が何を意味するかを示す必要があります。

また、マスクの削除を ajaxsuccessハンドラー内に移動しました。これは、ajax が戻ってきたら実行したいように思われるためです。そうですか？

編集:あなたが抱えている問題は、deleteDataクラスを持つアイテムに複数回バインドしているためです。selectorを実行するとき$('.deleteData').click(、あなたは言って"get each instance of an element with the class 'deleteData' and then bind this function to it." います。「deleteData」のインスタンスが 3 つある場合、ajax コードは 3 回実行されます。$('#no').click($('#yes').click($('.deleteData').click($('#no').click($('#yes').click(

于 2012-10-18T01:15:11.210 に答える