Question

使用下面的代码，为什么$("#sidenav-overlay").trigger("click")在this.$sideNavOverlay.trigger("click")无效的情况下有效？

＆＃13;

(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

＆＃13;

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}

＆＃13;

<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>

＆＃13;

Answer 1

我唯一可以想到的就是报告的症状是，您未显示的代码中的某些内容正在删除旧的#sidenav-overlay（您在属性中缓存的那个），然后附加< em> new #sidenav-overlay代替。因此，您将在旧的，不再使用页面元素而不是新元素上触发事件。

事实上，这就是正在发生的事情，我们可以通过检查你所保存的#sidenav-overlay是否与之后点击的DOM中的元素相同（它不是）来看到：

(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>

因此，除非您可以阻止任何移除和替换元素，否则只需在需要时查找它。（一般情况下，除非你有充分的理由做其他事情，否则在需要时查找元素比将它们保存在属性或变量中更好。）

绑定事件不起作用

1 个答案: