Cómo llamar ajax sola vez

Question

que llamo la función de este código:

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

Mi función es

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

¿Cómo puedo hacer una sola vez llamada AJAX? Entonces, ¿cuándo se carga el contenido y no se actualizó la página para no cargar ajax? Traté de hacer variables booleanas, pero nada, supongo que es porque llamo a Everytime Function. Por favor, dame una idea de cómo hacerlo.

que

Answer 1

gracias cuando usted quiere hacer algo en ese evento.

Identificar cuando ya haya cargado sus datos.

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

O utilice one. cuando se quiere llamar una vez.

<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

Utilice la función .one():

Adjuntar un manejador a un evento para los elementos. El controlador se ejecuta como máximo una vez por elemento.

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

he añadido un atributo id al anclaje para permitir un aprieto más fácil, pero se puede usar $("#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(); 
     }, 
    }); 
    }); 
}); 

también utilizó event.preventDefault() para evitar la acción por defecto en el anclaje de ser seguido

Answer 3

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

En JS:

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