jQueryのアンバインドとバインド

Question

ケース：リンク上にマウスを移動すると何らかのタスクが発生するはずです。エリア/マウスが離れると、リンクのホバーリングは1秒間無効のままになり、再び動作します。

DEMOのPLNKR：mouseleaveイベントが発生するたびに、私はmouseenterとmouseleave、その後setTimeoutでアンバインドしていますので、

$("a").hover(function (event) { 
    event.preventDefault(); 
    alert('hovered'); 
}, function() { 
    $("a").unbind('mouseenter mouseleave'); 
    setTimeout(function() { 
      $("a").bind('mouseenter mouseleave'); 
    }, 1000);  
}); 

：ここ

http://plnkr.co/edit/m6SnDzuo2MA5hoYUEoPc?p=preview

は私のアプローチですそれらを再び結びつける。

これで問題は解決しましたが、1秒後にイベントは再バインドされません。

ここで何か間違っていると助けてください。

Answer 1

最初にhoverにバインドし、カーソルが離れるとunbindmouseenterとmouseleaveとなります。しかし、あなたはそれにどんな機能も割り当てていません。実際に前のhover -eventに再割り当てしますか？

あなたが指定した例では、handlerを設定しないでください。

docsより。

のeventType

型：String 1つまたは複数のそのような "クリック" として、またはDOMイベントの種類、 "提出"、またはカスタムイベント名を含む文字列を。

ハンドラ

型：Function（イベントeventObject）が、イベントがトリガされるたびに実行するための機能。

function onHover(){ 
 
    alert('hovered'); 
 
} 
 

 
function onHoverLeft(){ 
 
    console.log('onHoverLeft called'); 
 
    $("a").off('mouseenter mouseleave'); 
 
    setTimeout(function() { 
 
     console.log('setTimeout is done. Will rebind hover now.'); 
 
     $("a").hover(onHover, onHoverLeft); 
 
    }, 2000); 
 
} 
 
$("a").hover(onHover, onHoverLeft);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#">Foo</a>