skip to Main Content

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

2

Answers


  1. 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. 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