jQuery：使用Clickor刚添加的Mouseent选择器

Question

我正在尝试利用.mouseenter上的选择器，该选择器刚刚添加到同一脚本中具有click函数的元素中。但是它无法识别选择器。选择器最初必须存在于HTML中才能起作用。

  

HTML

<div class="nav-block">
<div class="nav-item closed">
<div class="detail">Resources</div></div></div>

  

jQuery

$('.detail').click( function() {
 $('.nav-item').addClass('open').removeClass('closed');
});
$('.nav-item.open').mouseenter(
 function(){
  $('.nav-item').removeClass('open').addClass('closed');
});

仅当我在初始HTML中将.open类设置为.nav-item时，mouseenter才似乎起作用。但不是在jQuery添加它之后。

实际上，当我将已关闭的鼠标悬停时，我正在尝试将其关闭，但是为了简化此问题，我将其反转。基本上，它归结为识别我刚刚添加的选择器，并且仍然使用刚刚被替换的选择器。如果我将mouseenter的选择器更改为.closed，那么即使刚刚关闭了.closed类，它也会关闭自身。

希望这很有意义。感谢您提供的任何帮助或指导。

这里是JSFiddle