Prevent multiple uploads with jquery

Question

Speak personal, I have a table with several users, each row has a Button to delete that particular record, I have the following code:

$('body').on('click', 'button[name="btn-delete[]"]', function (e) {
        e.preventDefault();
        var action = $(this).data("function");
        var nameType = $(this).data("name");
        var codigo = $(this).val();
        var Name = $('.user-name-' + codigo).html();
        var element = $(this).parent().parent().parent();

        $('.header-modal-box h4').text('Deletar');
        $('.row-f label').text('Deseja remover o ' + nameType + ' ' + Name + '?');

        Modal();

        $('#btn-true').click(function () {
            if ($('.trigger_notify').length) {
                $('.trigger_notify').remove();
            }
            $.ajax({
                url: '_models/Data.php?action=' + action,
                method: 'POST',
                data: {codigo: codigo},
                dataType: 'json',
                success: function (data) {
                    if (data.erro === true) {
                        trigger(data.notify);
                        element.remove();
                    } else {
                        trigger(data.notify);
                    }
                }
            });
        });

By clicking on button btn-delete, I present a modal with two anchors, one with the confirmed removal, in case (#btn-true), and one to cancel(#cancelar) and closes the modal.

When I click on #btn-true he quietly sends my request, but when I go on a second record, he sends 2 requests, the first and the second, and appears to me 2 notifications, I solved this problem with the stopImmediatePropagation();, however, the element.remove(); stop working, is there any way I can restart this event, so it doesn’t repeat with the same data from the previous event? Someone give a help?

Answer 1

You can keep your code exactly as it is on the question, just changing the event by clicking the button #btn-true to avoid multiple requests using the method .one jQuery. This method causes the event to run only 1 time when a button btn-delete[] is clicked.

Just change of:

$('#btn-true').click(function () {

To:

$('#btn-true').one("click", function () {

This is more advantageous because it avoids having to create global variables as reported by the first answer.

Answer 2

Your code is badly stamped You are setting every time your "body"" hears a click it will add an Eventlistener to your $("#btn-true") button ie if you excutate action 3 times it will add 3 events on the same button and so on.

you have two options to circumvent this problem the first is to simply change the button click Trigger by inserting only the <button id="btn-true" click="NomeDafuncao()"> or change your code up by something like this.

<script>
var codigo = null;
var action = null;

$('document').ready(function(){
    $('body').on('click', 'button[name="btn-delete[]"]', function (e) {
            e.preventDefault();
            action = $(this).data("function");
            var nameType = $(this).data("name");
            codigo = $(this).val();
            var Name = $('.user-name-' + codigo).html();
            var element = $(this).parent().parent().parent();

            $('.header-modal-box h4').text('Deletar');
            $('.row-f label').text('Deseja remover o ' + nameType + ' ' + Name + '?');

            Modal();
    });
    $('#btn-true').click(function () {
        if ($('.trigger_notify').length) {
            $('.trigger_notify').remove();
        }
        $.ajax({
            url: '_models/Data.php?action=' + action,
            method: 'POST',
            data: {codigo: codigo},
            dataType: 'json',
            success: function (data) {
                if (data.erro === true) {
                    trigger(data.notify);
                    element.remove();
                } else {
                    trigger(data.notify);
                }
            }
        });
    });
});