Question

我有这样的咖啡代码。

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

我想将此函数应用于动态追加的DOM，因此我尝试使用on()这样委托函数。

作为一个例子，我提到了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"

但是这段代码根本不起作用。

如何将该功能应用于动态添加元素？

Answer 1

我认为您需要取消绑定并添加悬停处理程序。此外，如果您缩进（在这种情况下），则不需要续行。

$( -> 

  #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

道肯到Sethen Maleno：https://stackoverflow.com/a/9827114/30946

如何使用`on（）`委托`hover（）`函数

1 个答案: