jquery .on() 行为怪异答案

【问题标题】：jquery .on() behaving weirdjquery .on() 行为怪异
【发布时间】：2014-07-31 03:34:35
【问题描述】：

$(document).on 'ready page:load', ->
  $('li.sleeve span.zoom-in').on 'click', -> #1
    $(this).removeClass('zoom-in').addClass('zoom-out')
    $(this).parents('li').toggleClass('flip').css('z-index', 99)
    $card = $(this).parents('.card')
    offset = $card.offset()
    $card.animate {
      top: '-='+(offset.top-30)
      left: '-='+(offset.left-50)
    }, 100

  $(document).on 'click', 'li.sleeve span.zoom-out', -> #2
    alert 'hi!'
    $sleeve = $(this).parents('.sleeve')
    $(this).removeClass('zoom-out').addClass('zoom-in')
    $sleeve.toggleClass('flip')
    $card = $(this).parents('.card')
    $card.animate {
      top: 0
      left: 0
    }, 1000, ->
      $sleeve.css('z-index', 3)

http://cardbinder.herokuapp.com/card_sets/avacyn-restored/cards - 如果您单击缩放按钮，就会发生一些奇怪的事情。起初，$(document).on 'click' 是$('li.sleeve span.zoom-out').on 'click'，但这不起作用，因为.on() 只能在页面加载时与 dom 中的对象很好地配合。因此，$(document) 过去通常对我有用。

底线，方法#2 会在#1 触发时立即触发。希望你能帮我找出原因。

【问题讨论】：

有。所有的卡片一开始都有这个。然后通过初始点击切换该类
第一次点击应该使卡片变大。然后保持更大直到第二次点击。

标签： jquery coffeescript

【解决方案1】：

您应该做的是将$('li.sleeve span.zoom-out').on 'click' 更改为$('body').on 'click', 'li.sleeve span.zoom-out', -> 之类的东西。因为第一个仅在页面加载时附加处理程序，而第二个将处理程序附加到与元素匹配的任何内容中..类似于$.delegate..

【讨论】：

我希望这是答案......不过效果相同。
如果可以，请在 JSFiddle 中做一个可能的示例，以便我们可以直接更改那里的代码..

【解决方案2】：

由于你的元素是文档的一部分，当你点击它时，你也在点击文档，所以文档点击事件也会触发。

【讨论】：

但我不是将其限制在文档中li.sleeve span.zoom-out 的范围内吗？这就是第二个论点的重点。

【解决方案3】：

According to the doc, 事件处理程序按其声明顺序触发。我们可以假设在事件列表中进行线性搜索。所以：

您在document 上附加了第一个处理程序，它与zoom-in 类匹配。当您单击您的项目时会触发它。
您将项目的类别从 zoom-in 更改为 zoom-out。再做一些工作，处理程序就完成了
jQuery 继续检查在document 级别能够响应click 事件的其他处理程序。直到响应 zoom-out 对象中的 click 的那个。当对象类 now 匹配时，它会轮流执行。

从外面看，#1 和 #2 连续发射。

您不能简单地交换代码中的两个“点击”处理程序吗？首先附加“点击缩小”会破坏这种行为。恕我直言。

如果这不起作用，阻止事件传播的更粗略的方法是在 #1 处理程序中调用 event.stopImmediatePropagation()。

【讨论】：