События кликов JQuery, которые запускаются несколько раз

Question

мой код показывает таблицу с флажком ввода, вот моя проблема: я должен проверить или снять флажок с каждой строки и отправить с помощью ajax код, check и libelle. Когда я пытаюсь с событием на клик результат умножается

$(document).on('click', '.droit_data', function () {
    var id_code = $(this).attr("id");
    $.ajax({
        url: "droit.php",
        method: "post",
        data: { id_code: id_code },
        datatype: "json",
        success: function (data) {
            var html = '';
            $.each(data, function (key, value) {
                html += '<tr>';
                html += '<td><div class="form-check"><input type="checkbox" class="form-check-input droit"  name="' + data[key].libelle + '" ';
                if (data[key].droit == 'true') {
                    html += 'checked id="droit"><label class="form-check-label" for="droit">' + data[key].libelle + '</label></td>';
                } else {
                    html += 'id="droit"><label class="form-check-label" for="droit">' + data[key].libelle + '</label></td></div></tr>';
                }

            });
            $("#tab").html(html);
            $('#modelId').modal("show");

        }
    });

    $(document).on('click', '.droit', function () {
        var check = $(this).prop('checked');
        var libel = $(this).attr('name');
        $.ajax({
            url: "droit_save.php",
            method: "post",
            data: { check: check, id_code: id_code, libel: libel },
            success: function (data) {
                alert(data);
            }
        });
    });
});

Answer 1

Если щелкнуть .droit_data несколько раз, регистрируется щелчок .droit несколько раз. Попробуйте переместить регистрацию события .droit вне области действия обработчика события .droit_data.

Примечание id_code выйдет из области действия щелчка .droit, поэтому я встроил его в качестве атрибута данныхна флажок, но вы можете сделать это, как вы хотите.

$(document).on('click', '.droit_data', function () {
    var id_code = $(this).attr("id");
    $.ajax({
        url: "droit.php",
        method: "post",
        data: { id_code: id_code },
        datatype: "json",
        success: function (data) {
            var html = '';
            $.each(data, function (key, value) {
                html += '<tr>';
                html += '<td><div class="form-check"><input type="checkbox" class="form-check-input droit"  name="' + data[key].libelle + '" ';
                if (data[key].droit == 'true') {
                    html += 'checked id="droit" data-id_code="' + id_code + '"><label class="form-check-label" for="droit">' + data[key].libelle + '</label></td>';
                } else {
                    html += 'id="droit" data-id_code="' + id_code + '"><label class="form-check-label" for="droit">' + data[key].libelle + '</label></td></div></tr>';
                }
            });
            $("#tab").html(html);
            $('#modelId').modal("show");

        }
    });
});

$(document).on('click', '.droit', function () {
    var check = $(this).prop('checked');
    var libel = $(this).attr('name');
    var id_code = $(this).data('id_code');

    $.ajax({
        url: "droit_save.php",
        method: "post",
        data: { check: check, id_code: id_code, libel: libel },
        success: function (data) {
            alert(data);
        }
    });
});

Редактировать: Добавлен фрагмент кода. Я заменил вызовы ajax.

$(document).on('click', '.droit_data', function () {
    var id_code = $(this).attr("id");

    var data = [
        { "droit": "true", "libelle": "test1" },
        { "droit": "false", "libelle": "test2" },
    ];

    var html = '';
    $.each(data, function (key, value) {
        html += '<tr>';
        html += '<td><div class="form-check"><input type="checkbox" class="form-check-input droit"  name="' + data[key].libelle + '" ';
        if (data[key].droit == 'true') {
            html += 'checked id="droit" data-id_code="' + id_code + '"><label class="form-check-label" for="droit">' + data[key].libelle + '</label></td>';
        } else {
            html += 'id="droit" data-id_code="' + id_code + '"><label class="form-check-label" for="droit">' + data[key].libelle + '</label></td></div></tr>';
        }

    });
    $("#tab").html(html);
    //$('#modelId').modal("show");
});

$(document).on('click', '.droit', function () {
    var check = $(this).prop('checked');
    var libel = $(this).attr('name');
    var id_code = $(this).data('id_code');
    console.log({ check: check, id_code: id_code, libel: libel });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="droit_data" id="thesource">Button</button>

<table id="tab">
</table>