How to delegate `hover()` function by using `on()` [duplicate]

问题

I had a coffee code like this.

  $('.foo').hover \
    (-> $(this).css "cursor", "pointer"), \
    (-> $(this).css "cursor", "default")

And I want to apply this function to dynamically appended DOM, so I tried to delegate function by using on() like this.

As a example I referred this question

  $(document).on 'hover', '.foo', (event) ->
    $(this).css "cursor", "pointer" if event.type is "mouseover"
    $(this).css "cursor", "default" if event.type is "mouseout"

But this code doesn't work at all.

How can I apply the function to dynamically added elements?

回答1:

I think you'll need to unbind and add the hover handler. Also, you don't need the line continuations if you're indenting (in this case).

$( -> 

  #debugger 

  addFooDiv = -> 
    div = $('<div class="foo">This is another foo div</div>') 
    $(this).parent().append(div)
    addFooHandler()

  onLeaveHandler = -> 
    $(this).css "cursor", "pointer"  
    $(this).css "background", "white"

  onEnterHandler = ->   
    $(this).css "cursor", "default"  
    $(this).css "background", "lightblue" # so it's real obvious

  $('.appendFoo').on('click', addFooDiv)

  addFooHandler = ->   
    $(".foo").unbind("hover") 
    $(".foo").hover(onEnterHandler, onLeaveHandler)

  addFooHandler()
)

http://plnkr.co/edit/JbQtqIOhg2AHBCuoHs4N?p=preview

Props to Sethen Maleno: https://stackoverflow.com/a/9827114/30946

来源：https://stackoverflow.com/questions/21481794/how-to-delegate-hover-function-by-using-on

标签

javascript

jquery

css

coffeescript