Disable button after jQuery click

Question

Well I’m having the following problem. jQuery identifies the tag data-link to recover the link and redirect the page. Soon after this the boot has to be disabled.

The problem is that by clicking the button it is disabled and is not redirected.

How do I disable it only later? This and to avoid a double click.

$("body").on('click', '[data-link]', function() {

  console.log($(this).data('link'));

  // Verifica se tem link
  if (typeof $(this).data('link') !== 'undefined') {
    document.location.href = $(this).data('link');
  }
});


$(document).ready(function () {
   
    // verificação de clieque
    $("button").click(function () {
        
        if(!$(this).disabled){

            // Desabilita o botao
            $(this).prop('disabled', true);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type='submit' data-link="http://www.google.com">OK</button>

<br>
<Br><br><br>

<div data-link="http://www.google.com">OK</div>

Answer 1

Hugo, I wouldn’t fit you like this?

$("body").on('click', '[data-link]', function() {

  console.log($(this).data('link'));
  // Verifica se tem link
  if (typeof $(this).data('link') !== 'undefined') {
    document.location.href = $(this).data('link');
  }

  if (!$(this).disabled) {
    // Desabilita o botao
    $(this).prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type='submit' data-link="http://www.google.com">OK</button>

<br>
<Br><br><br>

<div data-link="http://www.google.com">OK</div>

Answer 2

You set two behaviors for the button click event

• $('body').on('click', '[data-link]', function() { ... });
• $('button').click(function () { ... });

Javascript will adopt one or the other, in your case, when you call the button click is calling the last declared $('button').click(function () { ... });, at no time will call the first option.

How to solve this problem?

Declare your entire function in just one event, it can look like this:

$("body").on('click', '[data-link]', function() {
  var enderecoLink = $(this).data('link');
  if (enderecoLink)
    document.location.href = enderecoLink;

  $(this).prop('disabled', !$(this).disabled);
});

How to know which function is being called?

You can use the options of debug browser and add break points.

Function of Location.href

The Location.href will redirect the user (in the same tab) to the address you set, that is, the button that was clicked will no longer exist, as it will be in a new address/site/url...

To continue on your page and open a new one, use open window. instead of location.href

$("body").on('click', '[data-link]', function() {
  var enderecoLink = $(this).data('link');
  if (enderecoLink)
    window.open(enderecoLink);

  $(this).prop('disabled', !$(this).disabled);
});

Documentation is the best place for you to get information and learn how to use the resources you’re using, so read fearlessly. :)