4

Tenho uma lista de botões (<li>):

<li id="1">link 1</li>
<li id="2">link 2</li>
<li id="3">link 3</li>
<li id="4">link 4</li>
<li id="5">link 5</li>

Quando o usuário clica em um link ele executa um Ajax e faz uma requisição em um arquivo PHP, quando clica em outro, ele faz a mesma requisição e a assim sucessivamente.

Gostaria de saber como faço para quando o usuário clicar no link e apenas no primeiro clique fazer a requisição e se ele clicar de novo não fazer mais a requisição.

PS.: Quando ele clica em qualquer um dos links, ele executa o evento html() que guarda os resultados em uma div que fica logo ao lado das <li>

1
  • Como você está fazendo atualmente? Existem muitas maneiras, a questão é escolher uma que se encaixe bem no resto do seu código...
    – mgibsonbr
    Commented 14/04/2015 às 4:44

3 Respostas 3

7

Uma maneira de se fazer isso é através de $.one. Ele coloca um tratador de eventos no conjunto de elementos selecionados, de forma que o tratador somente será chamado uma única vez para cada elemento do conjunto. Exemplo:

$("li").one("click", function() { 
    alert("click"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="1">link 1</li>
<li id="2">link 2</li>
<li id="3">link 3</li>
<li id="4">link 4</li>
<li id="5">link 5</li>

Note que se fizer isso não há uma maneira simples de "religar" o tratador de eventos caso você precise fazê-lo por algum motivo (por exemplo, se a chamada ajax falhar, e você quiser que um elemento individual da lista possa ser clicado de novo). O máximo que você pode fazer é recolocar o tratador no futuro (pois o que o one faz é remover o tratador após ele ser chamado).

6

Deixando uma solução em Vanilla JavaScript para anexar um evento de click em cada <li/> presente na <ul/> especificada onde o mesmo só dispara uma vez.

Exemplo

var ul = document.getElementById("minhaLista");

var items = ul.getElementsByTagName("li");

for (var i = 0; i < items.length; ++i) {
  items[i].addEventListener("click", handler);
}


function handler(e) {

  e.target.removeEventListener(e.type, arguments.callee);

  alert("Teste, uma vez por clique em cada LI!");
}
<ul id="minhaLista">
  <li id="1">link 1</li>
  <li id="2">link 2</li>
  <li id="3">link 3</li>
  <li id="4">link 4</li>
  <li id="5">link 5</li>
</ul>

Explicação

  • Identificar a <ul/>:

    var ul = document.getElementById("minhaLista");
    
  • Apanhar as <li/> dentro da <ul/>:

    var items = ul.getElementsByTagName("li");
    
  • Por cada <li/>, anexar evento click:

    for (var i = 0; i < items.length; ++i) {
        items[i].addEventListener("click", handler);
    }
    
  • Função chamada no evento anexado que remove o próprio evento após primeiro uso:

    function handler(e) {
    
        // remover evento para não voltar a executar
        e.target.removeEventListener(e.type, arguments.callee);
    
        // código a executar aqui...
        alert("Teste, uma vez por clique em cada LI!");
    }
    
2
  • 3
    +1 isso é basicamente o que o jQuery.one faz, mas sem jQuery - bom pros casos em que o jQuery (e todos os seus KB) não é realmente necessário.
    – mgibsonbr
    Commented 14/04/2015 às 9:17
  • 2
    @mgibsonbr Bem verdade! E parece relevante ir deixando soluções sem recurso a jQuery sempre que a oportunidade surge, javascript, uma vez que Vanilla JS está a cair no esquecimento...
    – Zuul
    Commented 14/04/2015 às 9:21
6

Para além da maneira que o mgibsonbr já indicou, que permite fazer click só uma vez, podes precisar de outra variante caso precises guardar no DOM a informação se já foi clicado (para além de não permitir mais que 1 vez).

Podes fazer isso assim, guardando um data-clicado no elemento:

$('li').on('click', function (e) {

    var clicado = $(this).data('clicado');

    // se "clicado" tiver valor o click não é mais seguido
    if (clicado) return e.preventDefault();

    // aqui juntas um timestamp ao elemento para saberes que foi clicado e quando
    $(this).data('clicado', new Date().getTime()); 

    $.ajax... // o teu código de ajax aqui...
});

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 .