使用下面的代码，为什么$("#sidenav-overlay").trigger("click")起作用而this.$sideNavOverlay.trigger("click")不起作用？
(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>最佳答案
我唯一想到的就是所报告的症状，这是您未显示的代码中的某些内容是删除了旧的#sidenav-overlay（您缓存在属性中的那个），然后附加了新的#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>因此，除非您可以阻止进行任何操作来删除和替换元素，否则请在需要时对其进行查找。 （通常，除非有充分的理由要做其他事情，否则在需要时查找元素比将其保留在属性或变量中更为可取。）
关于javascript - 绑定(bind)事件不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39720058/