.hover（）が同じ要素に複数回バインドされないようにする

Question

この質問のタイトルは、.hover()が同じ要素に複数回バインドされないようにする最終的な目標を反映しています。私はSOで検索を行なったし、私はすでに答えているこの質問を発見した尋ねる前に

：Checking if jQuery .hover action is already binded

はまた、私はそれについて多くをGoogleで検索しましたし、その質問への受け入れ答えが正しいように見えます。それと

、私は次の操作を実行しようとすると、コードの小片を思い付いた：クラスclass-name

を持つすべての要素を超える

1. ループ、その要素
2. 上のすべてのイベントを取得します.hover()イベントがすでにバインドされていることを確認してください。
3. そうでない場合は、追加してください。

$(document).ready(function() { 
 
    $('.class-name').each(function() { 
 
    var events = $._data($(this)[0], 'events'); 
 

 
    if (!(events['mouseover'] && events['mouseout'])) { 
 
     $(this).hover(
 
     function() { alert('IN'); }, 
 
     function() { alert('OUT'); } 
 
    ); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<a class="class-name">a</a>

上記のコードは動作しないと、エラーがどこにあるか私は理解することはできません。 JSコンソールの出力によれば、変数eventsはundefinedです。

助けてください。ありがとう。

Answer 1

でそれらを確認する前に、<a>要素にイベントをバインドするのを忘れていました。

最初はすべてのイベントが要素にバインドされていないため、$._data($(this)[0], 'events')はundefinedです。したがって、events変数はundefinedです。

if句は、このロジックに従う必要があります：固定コードスニペットの下

if ((no events at all) OR (mousever and mouseout events don't exist)) 

：

$(document).ready(function() { 
 
    $('.class-name').each(function() { 
 
    var events = $._data($(this)[0], 'events'); 
 

 
    if (typeof(events) === 'undefined' || !(events['mouseover'] && events['mouseout'])) { 
 
     $(this).hover(
 
     function() { alert('IN'); }, 
 
     function() { alert('OUT'); } 
 
    ); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<a class="class-name">a</a>

Answer 2

あなたif声明私は問題を発見した

$(document).ready(function() 
 
{ 
 
    $('.class-name').each(function() 
 
    { 
 
    var events = $(this); 
 
    //set the events first 
 
    events.on("mouseover", mouseover); 
 
    events.on("mouseout", mouseout); 
 
    
 
    if ((events['mouseover'] && events['mouseout'])) { 
 
     console.log("both events bound to <a> tag"); 
 
    } 
 
    
 
    //output all event handlers in console 
 
    console.log('Event handlers :', $._data(events[0], "events")); 
 
    }); 
 
}); 
 

 
var mouseover = function(){console.log('IN');}; 
 
var mouseout = function(){console.log('OUT');};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<a class="class-name">a</a>