AJAX呼び出しがそのスパンを "置き換え"た後に、カーソルが動的に配置されたスパン上に既にカーソルが置かれているかどうかを確認するにはどうすればよいですか？

Question

これまで私は、mouseenterとmouseleaveの$（document）.onイベントを使用しました。これは、彼らが言うように動作します。つまり、スパンに入ったり離れるときに動作します。ここではそのコードの抜粋です：

$(document).on("mouseenter", ".hover_box", function() { 
    $(this).next('.hidden_iframe').prop("src", function(){ 
     return $(this).data("src"); 
    }); 
    $(this).next('.hidden_iframe').show(); 
}); 

$(document).on("mouseleave", ".hover_box", function() { 
    $(this).next('.hidden_iframe').hide(); 
}); 

ただし、カーソルがすでにスパン「上」ホバリングされている場合、私のAJAX呼び出しの後スパン「リロード」（.htmlの交換が）、それはMouseEnterイベントをトリガしていないときイベント（本当に私が正直であることを驚かすことはありません）。

この状態を検出するために$（ドキュメント）.onユーザー以外のイベントがありますか？あるいは私が使うことができる他のアプローチ？

ありがとうございました。

Answer 1

グローバル変数を設定して、カーソルがそのスパンを超えたことを覚えてから、リロード後にチェックすることができます。

var inSpan=false; 

$(document).on("mouseenter", ".hover_box", function() { 
    inSpan=true; 
    $(this).next('.hidden_iframe').prop("src", function(){ 
    return $(this).data("src"); 
    }); 
    $(this).next('.hidden_iframe').show(); 
}); 

$(document).on("mouseleave", ".hover_box", function() { 
    inSpan=false; 
    $(this).next('.hidden_iframe').hide(); 
}); 

次に、スパン内のhtmlを置き換えるときは、inSpan変数をチェックしてそれに応じて処理してください。あなたがHTMLを再読み込みした後

Answer 2

、あなたは要素が:hoverセレクタ（このためにグローバル変数を維持する必要はありません）でマウスポインタを持っているかどうかをチェックすることができ、そうであれば、mouseenterイベントをトリガ：

if ($(".hover_box").is(":hover")) $(".hover_box").mouseenter(); 

マウスがspan要素上にあるときに、イベントごとに100ミリ秒をトリガーに簡略化デモ：

// For demo only, every 100ms trigger mouseenter if pointing to the span 
 
setInterval(function() { 
 
    if ($(".hover_box").is(":hover")) $(".hover_box").mouseenter(); 
 
}, 100); 
 

 
$(document).on("mouseenter", ".hover_box", function() { 
 
    console.log('mouseenter event triggered'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Hover over span below to trigger mouseover every 100 ms: <br> 
 
<span class="hover_box">[span]</span>