jQuery Mobile：页面更改后导航不打开

Question

在我的 jQuery Mobile 项目中，我有一个带有切换图标的元素 #sidebar。

在我的基本文件中，就在#sidebar div 下方，我使用以下代码：

<a href="javascript:void(0)" id="toggle-sidebar">Toggle sidebar</a>
<div id="sidebar"> ... </div>

$('#toggle-sidebar').on('click', function() {
   $('#sidebar').toggleClass('visible');
});

当我的页面第一次加载时，切换效果非常好。但是，当我通过主导航更改页面时，切换不再起作用。我在 click 函数中放置了一个警报，并意识到在页面更改之后警报会执行多次，即与我之前更改页面的次数一样多。

当我通过在浏览器中输入 URL 并加载页面移动到另一个页面时，切换再次起作用。

我该如何解决这个问题？

Answer 1

如果在更改页面后单击时多次执行警报，则可能表明您在每次页面更改时都绑定了新的单击事件侦听器。尝试在绑定单击侦听器之前取消绑定该元素上的单击事件侦听器，以避免这种情况。像这样的：

$('#toggle-sidebar').off('click');
$('#toggle-sidebar').on('click', function() {
   $('#sidebar').toggleClass('visible');
});

它可能会解决问题。

您还可以查看 jQuery 事件命名空间https://api.jquery.com/event.namespace/。并将命名空间添加到您的点击事件中，这样它就不会取消绑定该元素上可能某天可能出现在代码中的其他点击事件。