Prevent multiple submissions with jquery

0

I have a table with several users, each line 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);
                    }
                }
            });
        });

When I click on button btn-delete , I present a modal with two anchor, one with the commit commit, in the case ( #btn-true ), and one to cancel ( #cancelar ) and closes the modal.

When I click on #btn-true it sends my request quietly, but when I go in a second register, it sends 2 requests, the first and the second, and I get 2 notifications, I solved this problem with stopImmediatePropagation(); however, element.remove() ; to work, will be if I have to restart this event, so it does not repeat with the same data as the previous event? Is there anyone there to help?

    
asked by anonymous 10.09.2018 / 15:26

2 answers

1

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

Just change from:

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

To:

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

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

    
10.09.2018 / 16:51
0

Your code is badly strutted You're setting every time your body or see a click it will add an EventListener to your $ button ("# btn-true") ie if you execute action 3 times it will add 3 events on the same button and so on.

You have two options to work around this problem, the first is simply to change the trigger of the button by inserting only the <button id="btn-true" click="NomeDafuncao()"> or changing 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);
                }
            }
        });
    });
});

    
10.09.2018 / 15:35