Jquery, can't update attribute previously created

Question

I'm just trying to work on new slider menu but I've a problem with Jquery.

I've a link. When I click on I use .css('left', -230) and all is okay but when i want to reverse by another clicked link like .css('left', 0) nothing happen.

I show you some code :

// The open part "target.width()" = 230
$('.nav-item').on('click', function () {
    if( 0 < $(this).find('.navbar-nav__sub').length ) {
        var target = $('.navbar-nav');

        target.css('left', -target.width());
    }
});

// The close part
$('.navbar-nav__sub .go-back').on('click', function () {
    console.log('HERE');
    var target = $('.navbar-nav');

    console.log(target);
    console.log(target.css('left'));

    target.css('left', 0);

    console.log(target.css('left'));

    console.log('END');
});

A strange thing in this problem is that I've this in my console :

HERE
Object { 0: ul.navbar-nav.flex-column, length: 1, prevObject: […] }
-230px
0px
END

It seem that the code work well but in my page the left attribute is always to -230px.

Someone have an idea ?

Thank you.

PS: As asked the JSfiddle who reproduce my problem

https://jsfiddle.net/w7Lknsxg/

If you click on "Menu01" Color turn to red and when you click on "<=" in submenu you have the execution in the console but the color don't change. You can see the class navbar-nav get new class "toto" but don't lost when I try to remove it in the second case.

Answer 1

Because the .go-back is nested within the .nav-item you are firing both event listeners due to event bubbling. You can stop this with event.stopPropagation(); from within the listener placed on the child item. (or be more specific in what you target as not to include subelements)

var ftl = window.ftl || {};

ftl.navbar = {
  config: {
    targetName: '.nav',
    target: null,
  },

  init: function init() {
    this.config.target = $(this.config.targetName);

    $('.navbar-toggle').on('click', function () { ftl.navbar.toggle(); });

    $('.nav-item').on('click', function () {
      if( !ftl.navbar.config.target.hasClass('open') ) {
        ftl.navbar.open();
      }

      // test la présence d'un sous menu
      if( 0 < $(this).find('.navbar-nav__sub').length ) {
        var target = $('.navbar-nav');

        target.addClass('toto');
        target.css('color', 'red');
      }
    });

    $('.navbar-nav__sub .go-back').on('click', function (event) {
      event.stopPropagation();
      console.log('HERE');
      var target = $('.navbar-nav');

      console.log(target);
      console.log(target.hasClass('toto'));

      target.removeClass('toto');
      target.css('color', "green");

      console.log('END');
    })

  },

  open: function open() {
    this.config.target.addClass('open').one('transitionend', function () {
      ftl.navbar.config.target.addClass('opened');
    });
  },

  close: function close() {
    this.config.target.removeClass('opened')
      .removeClass('open');
  },

  toggle: function toggle() {
    if( this.config.target.hasClass('open') ) {
      this.close();
    } else {
      this.open();
    }
  }

}
    
$(document).ready(function() {
    ftl.navbar.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">

    <nav class="navbar" role="navigation">

        <div class="container-nav flex-column">

            <div class="navbar__header">
                <a href="#" class="no-style">
                    <i class="fa fa-comment-o fa-2x navbar__icon" aria-hidden="true"></i>
                    <span class="navbar__text"><strong class="text-primary">web</strong>tutu</span>
                </a>
            </div>

            <div class="navbar__divider"></div>

            <ul class="navbar-nav flex-column">

                <li id="nav-item--one" class="nav-item">
                    <a href="#nav-item--one">
                        <i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
                        <span class="navbar__text">Menu01</span>
                    </a>

                    <ul class="navbar-nav__sub">
                        <li><a href="#">link 01</a></li>
                        <li><a href="#">link 02</a></li>
                        <li><a class="go-back" href="#"> <= </a></li>
                    </ul>
                </li>

                <li id="nav-item--two" class="nav-item">
                    <a href="#nav-item--two">
                        <i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
                        <span class="navbar__text">Menu02</span>
                    </a>
                </li>

                <li id="nav-item--three" class="nav-item">
                    <a href="#nav-item--three">
                        <i class="fa fa-user-circle-o navbar__icon" aria-hidden="true"></i>
                        <span class="navbar__text">Menu03</span>
                    </a>
                </li>
                
                <li class="mt-auto">
                    <i class="fa fa-angle-double-right fa-2x navbar-toggle" aria-hidden="true"></i>
                </li>

            </ul>
            
        </div>

        
    </nav>

</nav>