blahh.coffee

$(document).on 'ready page:load', ->
  
  # Lots of code goes here...

  $(document).on 'click', '.addition .label i', (e) ->
    console.log ".addition .label i 'click' fired! id : " + $(this).closest('.addition').data 'id'
    
  # Lots of code goes here...
  
# Discussão:
#
# O event "ready" acontece unicamente quando página inteira termina de ser carregada.
# O event "page:load" somente quando uma sessão, ou parte da página é recarregada pelo Turbolinks!

# Até aí sem problemas...

# O problema é o seguinte:
# Quando você faz:
# $(document).on 'click', '.addition .label i'
# Quem está sofrendo o bind? O "document" ou o "'.addition .label i'"???
#
# Resp: o "document"

# Então olha o fluxo:

# A página inteira carrega pela primeira vez, o "ready" é invocado e o document sofre o bind.
# Aí você clica em algum outro link, navegação, whatever....
# O ready não é mais invocado, quem é invocado é o page:load.
# Nesse meio tempo o document continua sofrendo o re-bind!
# Você está fazendo o re-bind do document a cada vez que o Turbolinks é carregado.


# Isso deve funcionar:

$(document).on 'ready page:load', ->
  
  # Lots of code goes here...

  $(".addition .label i").click (e) ->
    console.log ".addition .label i 'click' fired! id : " + $(this).closest('.addition').data 'id'

# Para deixar mais claro, olhe o exemplo a seguir:

# Com o meu código assim:

$(document).on 'ready page:load', ->
  $(document).on 'click', '.main-navigation', ->
    console.log("Test")

# Acontece o mesmo problema de multiple fires: http://puu.sh/8DT0B.gif

# Mas o meu código assim, funciona:

$(document).on 'ready page:load', ->
  $(".main-navigation").click ->
    console.log("Test")

# Olha só agora: http://puu.sh/8DT0N.gif