0

I have a navigation menu. When the user leaves the li I want the menu to wait for a short value of time before closing. Previously I made the code apply which worked fine until I wanted to give different delays. The issue is the event does not trigger.

I tried making a version of the item on jsfiddle which works fine - https://jsfiddle.net/cv6t7yqw/

My code:

$("#nextLeftNav li, #prevLeftNav li").on("mouseleave", function (event) {
            var element = $(event.currentTarget);
            element.removeClass("hover");
            var delayMs = 600;
            if($(this).is("#nextLeftNav li"))
            {
             delayMs = 3000;
            }
            timeOutMethod = setTimeout(timeoutNavbar, delayMs, element);     
});

function timeoutNavbar(){
    console.log("timeOutNavBar")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id="prevLeftNav">
  <li>
    <span class="chevron top">
    </span>
  </li>
</div>

When I inspect prevLeftNav's only li I see the dimensions of around 200x20 and can physically see the li.

Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130
Zain
  • 1,246
  • 4
  • 15
  • 26
  • If the content is dynamically added, that function will not bind to the element. Try using `.on`'s 2nd parameter. – smddzcy Dec 23 '16 at 12:16
  • try mouseout https://jsfiddle.net/cv6t7yqw/1/ – Lidaranis Dec 23 '16 at 12:17
  • 1
    A couple of possible reasons: 1) The element is added dynamically, so the handler won't be bound to it. 2) Your handler is being unbound with a call to `.off()` after your call to `.on()`. – Andy Dec 23 '16 at 12:18
  • @Lidaranis Mouseout didn't work. – Zain Dec 23 '16 at 12:18
  • 1
    @SamedDüzçay the content is dynamically added. Is this a problem? I'll have a look at on's second parameter just now. – Zain Dec 23 '16 at 12:19
  • @user3245390 are you sure? fiddle seems to be working https://jsfiddle.net/cv6t7yqw/2/ – Lidaranis Dec 23 '16 at 12:20
  • @user3245390 if the content is added dynamically, you have to bind the event handler once the element is added. So for any *DOM* change that involve the elements you're working on. – Mario Santini Dec 23 '16 at 12:20
  • @MarioSantini To clarify I need to use .bind on #prevLeftNav and add a mouseleave event? If so thank you. – Zain Dec 23 '16 at 12:27
  • @Lidaranis You have misread the question but thank you for trying anyways. – Zain Dec 23 '16 at 12:29
  • @user3245390 your question has issue first of all. Mention that you have added elements dynamically. Fiddle is does not depict that. – ScanQR Dec 23 '16 at 12:35
  • @ScanQR I'm sorry but you don't have to take it out on me that you misread the question. I saw your comment before you deleted it. If it's not apparent I'm not exactly experienced in jQuery so I didn't know that that was a problem. The JSFiddle was only there to show the logic itself is correct and that I am sure that the problem is the event is not firing. – Zain Dec 23 '16 at 12:38

0 Answers0