Question

$(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发射后立即触发。希望你能帮助我找出原因。

Answer 1

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

Answer 2

由于您的元素是文档的一部分，因此当您单击它时，您也单击该文档，因此文档单击事件也将触发。

Answer 3

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

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

从外面开始，＃1和＃2连续发射。

你不能简单地交换两个＆＃34;点击＆＃34;代码中的处理程序？附加＆＃34;点击缩小＆＃34;首先会打破这种行为。 IMHO。

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

jquery .on（）表现得很奇怪

3 个答案: