如何使用`on()`委派`hover()`功能[重复]

Posted 2023-03-03

【中文标题】如何使用`on()`委派`hover()`功能[重复]

【英文标题】：How to delegate `hover()` function by using `on()` [duplicate]

【发布时间】：2014-02-24 05:59:17

【问题描述】：

我有一个这样的咖啡代码。

  $('.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"

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

如何将函数应用于动态添加的元素？

【问题讨论】：

The .hover() method binds handlers for both mouseenter and mouseleave events 而不是mouseover 和mouseout。另外，请注意.on() 对'hover' 的支持是deprecated in jQuery 1.8, removed in 1.9。

【参考方案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://***.com/a/9827114/30946