Wie Ajax nur rufen, sobald

Question

I Funktion von diesem Code aufrufen:

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

Meine Funktion

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(); 
      }, 
     }); 
} 

ist Wie kann ich nur einmal Ajax-Aufruf zu machen? Also, wenn der Inhalt geladen ist und die Seite nicht erneut geladen wurde, um Ajax zu laden? Ich habe versucht, boolesche Variablen zu machen, aber nichts, ich befürworte es, weil ich jedes Mal die Funktion rufe. Bitte gib mir eine Idee, wie es geht.

danke

Answer 1

Wenn Sie etwas an diesem Ereignis machen wollen.

Identifizieren Sie, wenn Sie Ihre Daten bereits geladen haben.

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; 
} 

Oder one. verwenden, wenn Sie es einmal nennen wollen.

<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

Verwenden der .one() Funktion:

einen Handler auf ein Ereignis Befestigen für die Elemente. Der Handler wird höchstens einmal pro Element ausgeführt.

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

Ich habe ein id Attribut auf den Anker hinzugefügt, leichter binden zu lassen, aber man konnte $("#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(); 
     }, 
    }); 
    }); 
}); 

Auch event.preventDefault() aus der Standardaktion auf dem Anker verwendet verwenden zu verhindern nach Verfolgte

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); 
})