2

Bom estou tendo o seguinte problema. O jQuery identifica a tag data-link para recuperar o link e redirecionar a página. Logo após isso o botando tem que ser desabilitado.

O problema e que ao clicar no botão ele e desabilitado e não é redirecionado.

Como faço para ele ser desabilitado só depois? Isso e para evitar um duplo clique.

$("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>

2 Respostas 2

4

Você definiu dois comportamentos para o evento click do botão

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

O javascript irá adotar um ou outro, no seu caso, quando chama o click do botão está invocando o último declarado $('button').click(function () { ... });, em nenhum momento irá chamar a primeira opção.

Como resolver esse problema?

Declare toda sua função em apenas um evento, poderá ficar assim:

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

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

Como saber qual função está sendo chamada?

Você pode utilizar as opções de debug do navegador e adicionar break points.

Função do location.href

O location.href irá redirecionar o usuário (na mesma aba) para o endereço que você definir, ou seja, o botão que foi clicado não existirá mais, pois estará em um novo endereço/site/url...

Para continuar na sua página e abrir uma nova, utilize window.open ao invés do location.href

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

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

A documentação é o melhor lugar para você obter informações e aprender a utilizar os recursos que você está usando, então leia sem medo. :)

4

Hugo, assim não te serviria?

$("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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .