11

我从此代码调用函数：

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

我的功能是

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

我怎样才能只进行一次ajax调用？那么当内容被加载并且页面没有被重新加载时不加载ajax？我试图做布尔变量但什么也没做，我想这是因为我调用了每次函数。请给我一个想法如何做。

谢谢你

4

3 回答 3

28

当您想对该事件做某事时。

确定您何时已加载数据。

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

或one.在您想调用一次时使用。

<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."

参考

于 2012-07-31T11:21:27.250 回答
11

使用.one()功能：

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

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

我已向id锚点添加了一个属性以允许更轻松地绑定，但您可以使用$("#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();
      },
    });
  });
});

也用于event.preventDefault()防止锚点上的默认动作被遵循

于 2012-07-31T11:21:33.843 回答
1 
<div id="header-button-news" class="header-button-info">
    <a id="a_news" title="Новости"></a>
    <div class="new">2</div>
</div>

在 JS 中：

$(function(){
    $('a#a_news').one('click',showNews);
})
于 2012-07-31T11:21:42.000 回答