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');
});

当我的页面第一次加载时，切换工作完全正常。但是，当我通过主导航更改页面时，切换不再起作用。我在点击功能中添加了一个警报，并意识到AFTER页面更改警报会多次执行，即我之前更改过多次。

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

我该如何解决这个问题？

Answer 1

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

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

它可以解决问题。

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

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

1 个答案: