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
Post a Comment