CODEWITHSUNDEEP
javascriptjquery
jameshwart lopez
jameshwart lopez

Reputation: 3131

Bind events not working

With the code below, why does $("#sidenav-overlay").trigger("click") work while this.$sideNavOverlay.trigger("click") doesn't work?

(function($) {
  $(function() {

    var app = {

      init: function() {
        this.cacheDom();
        this.bindEvents();
      },
      cacheDom: function() {
        this.$buttonCollapse = $('.button-collapse');
        this.$sideNavClear = $("#side-nav-clear");
        this.$sideNavOverlay = $("#sidenav-overlay");
      },
      bindEvents: function() {
        this.$buttonCollapse.sideNav();
        this.$sideNavClear.on('click', this.closeSideNavigation.bind(this));
      },
      closeSideNavigation: function() {
        console.log('closesideNavigation');
        console.log(this);
        console.log(this.$sideNavOverlay);
        console.log($("#sidenav-overlay"));
        //$("#sidenav-overlay").trigger("click");
        this.$sideNavOverlay.trigger("click");
      }

    };

    app.init();

  }); // end of document ready
})(jQuery); // end of jQuery name space
.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="http://materializecss.com/css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />

<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Navbar Link</a>
      </li>
    </ul>

    <ul id="nav-mobile" class="side-nav">
      <li><a href="#">Navbar Link</a>  <a class="right" id="side-nav-clear" style="margin-top: 22px;"><i class="material-icons small icon-demo">clear</i></a>
      </li>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav>

<div class="section no-pad-bot" id="index-banner">
  <div class="container">
    <h1 class="header center orange-text">Starter Template</h1>
  </div>
</div>

<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>

Upvotes: 0

Views: 786

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1073988

The only thing I can think of that would account for the reported symptom is that something in code you haven't shown is removing the old #sidenav-overlay (the one you cached in your property) and then appending a new #sidenav-overlay instead. So you're triggering the event on the old, no-longer-in-the-page element instead of the new one.

And in fact, that's what's happening, and we can see by checking to see if the #sidenav-overlay you've saved is the same element that's in the DOM later when clicked (it isn't):

(function($) {
  $(function() {

    var app = {

      init: function() {
        this.cacheDom();
        this.bindEvents();
      },
      cacheDom: function() {
        this.$buttonCollapse = $('.button-collapse');
        this.$sideNavClear = $("#side-nav-clear");
        this.$sideNavOverlay = $("#sidenav-overlay");
      },
      bindEvents: function() {
        this.$buttonCollapse.sideNav();
        this.$sideNavClear.on('click', this.closeSideNavigation.bind(this));
      },
      closeSideNavigation: function() {
        console.log(
          "Same element? " +
            ($("#sidenav-overlay")[0] === this.$sideNavOverlay[0])
        );
        $("#sidenav-overlay").trigger("click");
      }

    };

    app.init();

  }); // end of document ready
})(jQuery); // end of jQuery name space
.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="http://materializecss.com/css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />

<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Navbar Link</a>
      </li>
    </ul>

    <ul id="nav-mobile" class="side-nav">
      <li><a href="#">Navbar Link</a>  <a class="right" id="side-nav-clear" style="margin-top: 22px;"><i class="material-icons small icon-demo">clear</i></a>
      </li>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav>

<div class="section no-pad-bot" id="index-banner">
  <div class="container">
    <h1 class="header center orange-text">Starter Template</h1>
  </div>
</div>

<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>

So unless you can prevent whatever's removing and replacing the element from doing so, just look it up when you need it. (In general, unless you have a good reason for doing something else, looking up elements when you need them is preferable to keeping them in properties or variables.)

Upvotes: 1

Related Questions