Why in Jquery does "on click" only update once? Then shows "undefined" on $(this) the second time?

Question

I'm simply creating a nav menu and have a basic unordered list with a "sub-menu" within. Here's the Jquery. The reason for the "active" class and if statement is that I want the slider to remain open if choosing another item on the list, so that it doesn't close and open again each iteration.

The problem part here for me in the code is here.

$('.slider').html( $(this).find('ul') );

The main issue is that on('click',), is only updating the first time it's clicked. On a second click on another item in the menu, it doesn't update itself with the new selection and therefore doesn't show the new sub-menu list? Console log shows that it is undefined. But it should be like the first time?

I don't understand why this is happening or the reasons behind it! Logic tells me the same thing that happens the first time, should keep happening, and therefore work?! Help appreciated before I make a hole in the wall with me forehead!

$(document).ready(function() {

    $('ul > li > ul').hide();
    $('.slider').hide();

    // Menu
    $('.menuNav > ul > li').on('click', function() {

        // if active
        if ( $(this).hasClass('active') ) {
            $(this).parents().children().removeClass('active');
            $('.slider').hide('slide', 200);
        }

        // if unactive
        else {
            $(this).addClass('active');
            $('.slider').show('slide', 200);
            $(this).siblings().removeClass('active');
            // Show related list
            $('.slider').html( $(this).find('ul') );

        }

    });
});

HTML

<div class="menuNav">
  <ul>

    <li><span>item_1</span>
      <div class="sub_position">
          <ul>
            <li>sub-item_1-1</li>
            <li>sub-item_1-2</li>
            <li>sub-item_1-3</li>
            <li>sub-item_1-4</li>
          </ul>
      </div>
    </li>

    <li><span>item_2</span>
        <div class="sub_position">

      <ul>
        <li>sub-item_2-1</li>
        <li>sub-item_2-2</li>
        <li>sub-item_2-3</li>
        <li>sub-item_2-4</li>
      </ul>
      </div>
    </li>

.... etc

  </ul>
</div>

Answer 1

Your issue likely arises from the fact that you are actually moving the entire submenu into .slider, instead of cloning it. This means that the submenu will be removed from the original menu the first time you click it, and clicking on it again will mean that the nested submenu selector $(this).find('ul') will return an empty set.

To circumvent this issue, I suggest that you do the following:

• Append the outerHTML of the submenu to slider, i.e. $(this).find('ul')[0].outerHTML
• If you want to hide the submenu in the menu when this is done, simply hide/unhide it when appropriate.

You can always use $(this).find('ul').html() for the same effect, but remember that <li> elements must be immediate children of <ul>. Therefore, we need to clone the outerHTML as well (i.e. copy the <ul>) to ensure that you have a valid HTML being injected into your slider.

$(document).ready(function() {

  $('ul > li > ul').hide();
  $('.slider').hide();

  // Menu
  $('.menuNav > ul > li').on('click', function() {

    // if active
    if ($(this).hasClass('active')) {
      $(this).parents().children().removeClass('active');
      $('.slider').hide('slide', 200);
    }

    // if unactive
    else {
      $(this).addClass('active');
      $('.slider').show('slide', 200);
      $(this).siblings().removeClass('active');
      // Show related list (changed: now we use HTML's native outerHTML object
      $('.slider').html($(this).find('ul')[0].outerHTML);

    }

  });
});

.slider {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="slider"></div>
<div class="menuNav">
  <ul>

    <li><span>item_1</span>
      <div class="sub_position">
        <ul>
          <li>sub-item_1-1</li>
          <li>sub-item_1-2</li>
          <li>sub-item_1-3</li>
          <li>sub-item_1-4</li>
        </ul>
      </div>
    </li>

    <li><span>item_2</span>
      <div class="sub_position">

        <ul>
          <li>sub-item_2-1</li>
          <li>sub-item_2-2</li>
          <li>sub-item_2-3</li>
          <li>sub-item_2-4</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Answer 2

You have to fix this line

$('.slider').html( $(this).find('ul') );

I am not sure what you are trying to achieve here, but you cannot treat a DOM object as HTML code. The reason your code works once is that this line is does not fire the first time (your first IF statement fires). The second time ELSE kicks in and this evil line messes things up.

Solution 1: Comment out or remove this line

//$('.slider').html( $(this).find('ul') );

Solution 2: Figure out what you want to do with this line and do it the proper way.