Question

我想做类似于jQuery hover()函数的mouseleave回调：

语法：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

示例hover()代码：

$( "li" ).hover(
  function() {
    // handles hover event
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    // handles mouseout/mouseend event
    $( this ).find( "span:last" ).remove();
  }
);

我尝试将2个回调附加到on()函数但没有成功。

不幸的是，我需要使用on()委托事件，因为我需要动态添加我需要定位的DOM元素。有谁可以实现这个目标？

我现在的jQuery：

$('ul.results').on('hover', 'li', function () {
        // hover stuff here
     }, function() {
        // obviously wrong
     }
});

Answer 1

如果我必须这样做，那么我会这样做：

$('ul.results').on({
   mouseenter : mouseEntr
   mouseleave : mouselve
}, 'li');

function mouseEntr(){
   // mouse enter stuff here
}

function mouselve(){
   // mouse leave stuff here
}

Answer 2

$( "someList" ).on('hover', 'li', function() {
    // handles hover event
    $( this ).append( $( "<span> ***</span>" ) );
  });
$( "someList" ).on('mouseleave', 'li', function() {
    // handles mouseout/mouseend event
    $( this ).find( "span:last" ).remove();
});

Answer 3

使用此

$( "body" ).on('mouseenter', 'ul.results li', function() {
    $( this ).append( $( "<span> ***</span>" ) );
});

$( "body" ).on('mouseleave', 'ul.results li', function() {
    $( this ).find( "span:last" ).remove();
});

Answer 4

您可以像这样链接多个.on()：

$('ul.results').on('mouseenter', 'li', function( event ) {
    $( this ).append( $( "<span> ***</span>" ) );
}).on('mouseleave', 'li', function( event ) {
    $( this ).find( "span:last" ).remove();
});

使用jQuery中的委托on（）事件处理函数捕获悬停结束事件

4 个答案: