Question posted in
You can find the official documentation here.

Jquery auto click is not working it clicks too many times – Jquery ajax

I want just one time click my code always clicks and chrome blocks
im very happy if anyone help me

$(document).ready(function(){
    $('.mp3download').click(function(e){
        var button = $(this);
        if (button.data('id') == 3) {

            if (button.data('status') == false) {
                $(this).html('<i class="fas fa-sync fa-spin"></i> Converting..');
            }
            
            $.post('/ajax', {
                id: id,
            },function (e) {
                if (e.status == 'success') {
                    button.data('status', true);
                    button.html('<i class="glyphicon glyphicon-download-alt"></i> Download');
                    button.attr('href', e.url);
                    button[0].click();

                }else{
                    button.html(e.html);
                    button.attr('disabled', 'disabled');
                }
            });
            
        }
     });
  });

thanks if anyone figureout error

Tags:

2

Answers


  1. 0

    Try to simplify and do NOT click the same button

    $(function() {
  $('.mp3download[data-id=3]').on("click", function(e) {
      const $button = $(this)
      if ($button.data('status') == false) {
        $button.html('<i class="fas fa-sync fa-spin"></i> Converting..');
      }
      $.post('/ajax', {
        id: 3,
      }, function(res) {
        if (res.status == 'success') {
          $button.data('status', true);
          const $link = $(`<a href="${res.url}"><i class="glyphicon glyphicon-download-alt"></i> Download</a>`);
          $button.after($link)
          $link[0].click();
        } else {
          button.html(res.html);
          button.attr('disabled', 'disabled');
        }
      });
    }
  });
});
    Login or Signup to reply.
  2. 0

    You can simply play by disabling and enabling button

    HTML

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <button class="mp3download" data-status="" data-id="3">test</button>
</body>
</html>

    jQuery

        $(document).ready(function() {
    $('.mp3download').on('click', function(e) {
        var button = $(this);
        button.prop('disabled', true); 
        var buttonIdVal = button.data('id');
        if (buttonIdVal == 3) {
            if (button.data('status') == false) {
                $(this).html('<i class="fas fa-sync fa-spin"></i> Converting..');
            }
            $.post('/', {
                id: buttonIdVal,
            }, function(e) {
                if (true) {
                    button.data('status', true);
                    button.html('<i class="glyphicon glyphicon-download-alt"></i> Download');
                    //                     button.attr('href', e.url);
                    button[0].click();
                    console.log("clicked")
                    button.attr('disabled', false);
                } else {
                    button.html(e.html);
                   button.attr('disabled', false);
                }
            })
        }

    });
});

    Just add button.prop(‘disabled’, true); after var button = $(this); & button.prop(‘disabled’, false); after button[0].click();

    Try: https://jsbin.com/hudiroj/edit?html,js,console,output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search