jquery conflict between dropdown menu and ajax win

Question

I have a jquery dropdown menu and an modal window which is a trigger for ajax. The problem occurs when you click on link for ajax, and when you close it dropdowns are not working anymore. So dropdown is working when you dont click the ajax. When you click the link and close it, dropdown menu is not showing dropdown.

Try it and source code are here:

codepen.io/riogrande/pen/NxZLaQ

Step by step to reproduce:

1. Mouse over the right most "Lorem" and a drop down menu appears.

2. Exit the mouseover and click the link titled "Click here for ajax"

3. Click the "X" to exit the ajax popover

4. Step 1 no longer works.

Answer 1

You can use separate fadeIn and fadeOut functions instead of a single fadeToggle on hover and it will fix the issue:

$(".menu-dropdown").hover(
  function(e) {
    if ($(window).width() > 943) {
      $(this).children("ul").stop(true,false).fadeIn(150);
      e.preventDefault();
    }
  },
  function(e) {
    if ($(window).width() > 943) {
      $(this).children("ul").stop(true,false).fadeOut(150);
      e.preventDefault();
    }
  }
);

CodePen here.