How to execute code only on the first click?

4

I have a list of buttons ( <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>

When the user clicks on a link he executes an Ajax and makes a request in a PHP file, when he clicks on another, he makes the same request and so successively.

I would like to know how to do when the user clicks on the link and only on the first click to make the request and if he clicks again,

PS: When it clicks on any links , it executes the html() event that saves the results to a div that is next to the% sup>

    
asked by anonymous 14.04.2015 / 06:39

3 answers

6

One way to do this is through $.one . It places an event handler on the set of selected elements, so the handler will only be called once for each element in the set. Example:

$("li").one("click", function() { 
    alert("click"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><liid="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 that if you do this there is no easy way to "rewind" the event handler if you need to do it for some reason (for example, if the ajax call fails, and you want an individual list element be clicked again). The maximum you can do is to re-position the handler in the future (since what one does is remove the handler after it is called).

    
14.04.2015 / 06:48
6

Leaving a solution in Vanilla JavaScript to attach an event of click to every <li/> present in the <ul/> specified where it only fires once.

Example

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>

Explanation

  • Identify <ul/> :

    var ul = document.getElementById("minhaLista");
    
  • Catch <li/> within <ul/> :

    var items = ul.getElementsByTagName("li");
    
  • For every <li/> , attach event click :

    for (var i = 0; i < items.length; ++i) {
        items[i].addEventListener("click", handler);
    }
    
  • Function call in attached event that removes the event itself after first use:

    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!");
    }
    
14.04.2015 / 11:12
6

In addition to the mgibsonbr already listed , which allows click only once, you may need another variant if you need to save the information in the DOM if it has already been clicked (in addition to not allowing more than 1 time).

You can do this by saving a data-clicado in the element:

$('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...
});
    
14.04.2015 / 10:15