发送Ajax请求的`ajax：send`事件和`click`事件的区别

Question

我在这样的导轨中使用ajax请求和coffee 。

  $('#reload').on(
    'click': -> $('#response').html "<div class='panel'><img src='assets/load.gif'/></div>"
    'ajax:success': (data, res, xhr) ->
      $('#response').html res
  )

这段代码可以正常工作，但是当我将click事件更改为ajax:send事件（我认为它可以更正确地表示我在做什么）时，代码的工作原理几乎没有什么不同。

单击后即会出现该panel ，但是加载图像仅在2或3秒后出现。 我这次将像以前一样使用click事件。 但是我想知道为什么会发生这种情况以避免我将来的错误。

Answer 1

出现图像延迟是因为我以错误的方式使用了涡轮链接。

我的整个代码是这样的。

$ ->
  $('#reload').on(
    'ajax:send': -> $('#response').html "<div class='panel'><img src='assets/load.gif'/></div>"
    'ajax:success': (data, res, xhr) ->
      $('#response').html res
  )

然后我将$ ->重写$ -> ready = ->并添加了这段代码，那么延迟就不再发生了。

$(document).ready(ready)
$(document).on('page:load', ready)

Answer 2

您也可以使用ajax：before

$('#reload').bind('ajax:before', function() {
   $('#response').html("<div class='panel'><img src='assets/load.gif'/></div>"); 
});