0

I'm trying to utilize a selector on .mouseenter that was just added to an element with a click function in the same script. But it doesn't recognize the selector. The selector has to be there initially in the HTML for it to work.

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');
});

The mouseenter only seems to work if I set the .open class to the .nav-item in the initial HTML. But not after it gets added by the jQuery.

Actually I'm trying to close the open one when I rollover the closed ones, but I reversed it for simplification for this question. Basically it comes down to recognizing the selector I just added, and it still utilizes the selector that was just replaced. If I change the selector for mouseenter to the .closed, then it closes itself even though that .closed class was just replaced.

Hope this make sense. Thanks for any help or guidance you can provide.

Here is a JSFiddle

jberg
  • 71
  • 6
  • `$(document).on('click', '.detail', function() {...})`, [Check more](http://api.jquery.com/on/). – The Alpha Jun 24 '18 at 22:15
  • Ah Ha. Thank you so much. I was trying that with no result. But using that and adding this made it work. `$(document).on('mouseenter', '.nav-item.open', function(){...}` Thanks for your help, and sorry for duplicate. – jberg Jun 24 '18 at 23:27

0 Answers0