javascript - How to delegate `hover()` function by using `on()` -


this question has answer here:

i had coffee code this.

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

and want apply function dynamically appended dom, tried delegate function using on() this.

as example referred this question

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

but code doesn't work @ all.

how can apply function dynamically added elements?

i think you'll need unbind , add hover handler. also, don't need line continuations if you're indenting (in case).

$( ->     #debugger     addfoodiv = ->      div = $('<div class="foo">this 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" # 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 sethen maleno: https://stackoverflow.com/a/9827114/30946


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -