jQuery - 发送一次后不再发送ajax查询

我正在向服务器发送ajax查询以获取某些HTML。jQuery - 发送一次后不再发送ajax查询

我想这样做：

首先点击发送查询，并追加div到body（我的代码工作到这里）
如果被点击一次按钮则显示先前附加div。

请注意一件事012xx为我的ajax查询定义在data属性的按钮中。

这里是我的jQuery代码，它的每次点击发送AJAX查询：

jQuery('.open-box').click(function(){ 
    var action = jQuery(this).data('action'); 
    jQuery.ajax({ 
     type : 'GET', 
     url  : ajaxurl, 
     data : { action : action}, 
     dataType: 'html', 
     context: this, 
     success: function (response) { 
      jQuery(response).show().appendTo('body'); 
     }, 
    }); 
});

这里是我的按钮HTML

<button class="open-box" data-action="test-html">Open box</button>

来源

2013-07-16 user007

我不是一个jQuery的专家，但我认为这个解决方案是好的：

现在我的代码将检查如果data-loaded为true或false，如果为false，则它将发送ajax查询，并将数据加载更改为true。

jQuery('.open-box').click(function(){ 

    if (this.data('loaded')){ 
      jQuery(this).data('loaded', 'true'); 
     var action = jQuery(this).data('action'); 
     jQuery.ajax({ 
      type : 'GET', 
      url  : ajaxurl, 
      data : { action : action}, 
      dataType: 'html', 
      context: this, 
      success: function (response) { 
       jQuery(response).show().appendTo('body'); 

      }, 
     }); 
    }else{ 
     //show the appended div 
    } 
});

我的按钮HTML

<button class="open-box" data-action="test-html" data-loaded="false">Open box</button>

来源

2013-07-16 01:53:56 user007

如果我在'ajax（）'调用返回之前第二次单击它，将触发另一个请求。 –

将jQuery（this）.data（'loaded'，'true'）'移到顶端，希望它能起作用。 – user007

尝试one()，这是一个事件处理程序每个元素只运行一次：

jQuery('.open-box').one('click', function(){ 
    var action = jQuery(this).data('action'); 
    jQuery.ajax({ 
     type : 'GET', 
     url  : ajaxurl, 
     data : { action : action}, 
     dataType: 'html', 
     context: this, 
     success: function (response) { 
      jQuery(response).show().appendTo('body'); 
     }, 
    }); 
});

来源

2013-07-16 01:38:30

下面是做到这一点的一种方式是避免污染与任何挥之不去的变量父范围：

(function(){ 
    // This will be packaged into the handler as a closure 
    var hasBeenClicked = false; 

    jQuery('.open-box').click(function(){ 
     if(!hasBeenClicked) { 
      var action = jQuery(this).data('action'); 
      jQuery.ajax({ 
       type : 'GET', 
       url  : ajaxurl, 
       data : { action : action}, 
       dataType: 'html', 
       context: this, 
       success: function (response) { 
        jQuery(response).show().appendTo('body'); 
       }, 
      }); 
     } 
     hasBeenClicked = true; 
    }); 
})()

来源

2013-07-16 01:38:54

你想点击做AJAX调用，之后所有点击以显示DIV。

// set one click to trigger ajax 
jQuery('.open-box').one(function() { 
    jQuery.ajax({ 
     type : 'GET', 
     url  : ajaxurl, 
     data : { action : action}, 
     dataType: 'html', 
     context: this, 
     success: function (response) { 
      var createdDiv = jQuery(response); 
      createdDiv.show().appendTo('body'); 
      // now hook up futher clicks to show the div 
      jQuery('.open-box').click(function() { 
       createdDiv.show(); 
      }); 
     }, 
    }); 
});

我假设你只有一个按钮（或任何）的类“开箱”。

如果您有多个带有“open-box”类的按钮，那么您可以将createdDiv保存在数据变量中，并在click处理程序中检索引用。

来源

2013-07-16 01:56:46

这里是我的做法：

把一个div放在你身体的尽头。

<body> 
    ...... 
    <div id="append_container"></div> 
</div>

每次点击按钮时，只需更新append_container的内容即可。这样你就不用担心比较内容是否改变了。

如果你只想加载一次内容，你可以检查容器是否有任何内容。然后决定进行ajax调用。

来源

2013-07-16 03:21:33 nyzm

是的，你是对的 – user007

jQuery - 发送一次后不再发送ajax查询

回答

相关问题