Question

我一直在寻找答案很长一段时间，但我找不到它。这里所有回答的问题都不适用于我。我正在创建一个有侧栏的管理面板。我想制作一个按钮，如果你点击它，边栏就会折叠。这是我的代码：

HTML

<li class="nav-item mr-3 sidebar-toggle">
 <button class="sidebar-toggler btn btn-sidebar-toggle" type="button" id="sidebar-toggler">
    <i class="fal fa-bars"></i>
 </button>
</li>

我通过这样做插入了我的jQuery文件：

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

在我的页面底部。文件的路径非常好。

jQuery代码

$(document).ready(function () {

    $('#sidebar-toggler').on('click', function() {
        $('#sidebar').toggleClass('active');
        $('#navbar-brand').toggleClass('active');
    });

});

奇怪的是。如果我用F12打开控制台并将jQuery代码粘贴在那里，它的工作原理非常好。我做错了什么？

PS：活动的类确实存在。我在控制台中测试了它（见上面的消息）

Answer 1

听起来元素在页面加载时不存在，并使用javascript异步添加

尝试委派活动

$(document).ready(function () {

    $(document).on('click','#sidebar-toggler', function() {
        $('#sidebar').toggleClass('active');
        $('#navbar-brand').toggleClass('active');
    });

});

请参阅：Understanding Event Delegation

Answer 2

确保您的JavaScript代码在jQuery引用之后。您发布的代码工作正常。也许在其他地方存在问题，因此如果您需要更多帮助，请考虑发布其余代码。以下是您的代码工作的演示，我希望它可以帮助您在代码中找到问题：

$(document).ready(function() {
  $('#sidebar-toggler').on('click', function() {
    $('#sidebar').toggleClass('active');
    $('#navbar-brand').toggleClass('active');
  });

});

#sidebar {
  background-color: blue;
}

#navbar-brand {
  background-color: green;
}

#sidebar.active {
  background-color: red;
}

#navbar-brand.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item mr-3 sidebar-toggle">
  <button class="sidebar-toggler btn btn-sidebar-toggle" type="button" id="sidebar-toggler">
    <i class="fal fa-bars">test</i>
 </button>
</li>

<div id="sidebar">
  sidebar
  <div id="navbar-brand">brand</div>
  sidebar
</div>

jQuery点击事件不工作|适用于F12

2 个答案: