Come chiamare ajax solo una volta

Question

chiamo funzione da questo codice:

<div id="header-button-news" class="header-button-info"> 
     <a href="javascript:;" title="Новости" onclick="showNews()"></a> 
     <div class="new">2</div> 
    </div> 

La mia funzione è

function showNews() 
{   
     //other js which show block 

     jQuery("#loader").show(); 


     //ajax which load content to block 
     jQuery.ajax({ 
      type: "GET", 
      url: link, 
      dataType: "html", 
      success: function(data) { 
       jQuery('#top-info-news').html(data); 
      }, 
      complete: function(){ 
       jQuery('#loader').hide(); 
      }, 
     }); 
} 

Come posso fare solo una volta chiamata AJAX? quindi quando il contenuto è caricato e la pagina non è stata aggiornata per non caricare ajax? Ho provato a fare variabili booleane ma nulla, suppongo sia perché chiamo funzione Everytime. Per favore mi dia un'idea di come fare.

grazie

Answer 1

Quando si vuole fare qualcosa per quell'evento.

Identificare quando i dati sono già stati caricati.

var loaded = false; 

function showNews() { 
    //other js which show block 

    jQuery("#loader").show(); 


    if(loaded) return; 

    //ajax which load content to block 
    jQuery.ajax({ 
     type: "GET", 
     url: link, 
     dataType: "html", 
     success: function(data) { 
      jQuery('#top-info-news').html(data); 
     }, 
     complete: function(){ 
      jQuery('#loader').hide(); 
     }, 
    }); 

    loaded = true; 
} 

Oppure utilizzare one. quando si desidera chiamare una volta.

<a href="javascript:;" title="Новости" onclick="showNews()" class="showNews"></a> 

jQuery('.showNews').one('click', function() { 
    // your code 
}); 

"Attach a handler to an event for the elements. The handler is executed at most once per element."

reference

Answer 2

Utilizzare la funzione .one():

Collegare un gestore ad un evento per gli elementi. Il gestore viene eseguito al massimo una volta per elemento.

<a href="#" title="Новости" id="shownews"></a> 

Ho aggiunto un attributo id all'ancora per consentire una bind più facile, ma è possibile utilizzare $("#header-button-news a").one

$(document).ready(function() { 
    $('#shownews').one('click', function (evt) { 

    evt.preventDefault(); // prevent default click action 

    jQuery("#loader").show(); 
    //ajax which load content to block 
    jQuery.ajax({ 
     type: "GET", 
     url: link, 
     dataType: "html", 
     success: function (data) { 
     jQuery('#top-info-news').html(data); 
     }, 
     complete: function() { 
     jQuery('#loader').hide(); 
     }, 
    }); 
    }); 
}); 

utilizzato anche event.preventDefault() per evitare che l'azione di default su l'ancora di essere seguita

Answer 3

<div id="header-button-news" class="header-button-info"> 
    <a id="a_news" title="Новости"></a> 
    <div class="new">2</div> 
</div> 

In JS:

$(function(){ 
    $('a#a_news').one('click',showNews); 
})