3

一部のデータがユーザーに表示されるテーブルがあります。データをCRUDするためのボタンがあり、フロントエンドでjQueryを使用しています。ボタンが押されると、モーダルが表示され、データはajaxリクエストを介して更新されます。

私の問題は、更新ボタンをクリックしてモーダルを閉じ、別の更新ボタンをクリックしてデータを更新すると、クリックしたすべての行に同じ新しいデータが保存されることです。つまり、私のコードは、実行したクリック数と同じ数の回数実行されています。

これが私のコードです：http：//pastebin.com/QWQHM6aW

$(document).ready(function() {
    /*--------------------------------------------*/
    //  GENERAL
    /*--------------------------------------------*/
    function loadingStart() {
        $("#overlay").show(); 
        $("#loading").show();
    }

    function loadingDone() {
        $("#overlay").hide(); 
        $("#loading").hide();
    }

    $(document).ajaxStop(function() {
        loadingDone();
        //alert('Ajax Terminou');
    });

    function reloadRows() {
        $.post("ajax.php", { type: "AllRows" }) // Faz um post do tipo AllRows.
         .done(function(data) {
            alert(data);
            //$("#tbody").html(data);
         });
    }
    $("body").on("click", ".update-socio-btn", updateSocio);
    /*--------------------------------------------*/
    // UPDATE
    /*--------------------------------------------*/
    function updateSocio(event) {
        $("#socio-form input").val(''); // Apagar os valores do form.
        loadingStart(); // Começar o Loading...
        var id = $(this).closest('tr').find('.id-holder').html(); // Pegar o valor do id holder e salvar na var id.
        $("#socio-form input").removeClass("input-transparent").prop("disabled", false); // Queremos ver e utilizar os inputs.
        $(".modal-footer").removeClass("hidden"); // Queremos ver o footer do modal.
        $(".btn-modal").attr("id", "update-btn-confirm"); // Atribui o id: update-btn-confirm ao .btn-modal.

        $.post("ajax.php", { type: "read", id: id }) // Faz um post do tipo Read e retorna os valores nos inputs correspondentes
         .done(function(data) {
            console.log('read');
            jsonOBJ = jQuery.parseJSON(data);
            for (var key in jsonOBJ) {
                $("input[name=" + key + "]").val(jsonOBJ[key]);
            }
         });

        $("#update-btn-confirm").click(function() { // Quando clicar no botão de salvar.
            var formArray = $("#socio-form").serializeArray(); // Pega todas as informações dos inputs e transforma em um array json.
            $.post("ajax.php", { type: "update", id: id, inputs: formArray }) // Faz um post do tipo Update.
             .done(function(data) {
                console.log('uptade');
                alert(data);
                event.stopPropagation();
             });
        });
        event.preventDefault();
    }
});

問題は方法にあると強く思いますが.on、それを特定するのに苦労しています。.live()またはを使用できることはわかっていますが.bind()、両方とも非推奨であるため、これを回避しようとしています。

助言がありますか？

4

1 に答える 1

4

クラスのある要素をクリックするたび.update-socio-btnに、updateSocio関数が実行されます。実行されるたびupdateSocioに、新しいクリックイベントがにバインドされ#update-btn-confirmます。

これを修正するには、クリックバインディングをupdateSocio関数の外に移動し、イベントハンドラーを1回だけバインドします。

于 2013-03-25T00:17:07.623 に答える