javascript - jQuery 无法识别该类已更改，但浏览器可以识别

Question

我一直在尝试使用 jQuery 创建一个下拉菜单。我有 3 个子文件夹，每个子文件夹有 3 个子文件夹(如果这是错误的术语，请纠正我)。根据子文件夹是折叠(子子不可见)还是展开(子子可见)，展开时会有一个向下的小箭头，折叠时会指向右侧。我是新手，不想使用很多外部脚本，因此我删除了 Subshown_arrow 类，并在单击时添加 Subhidden_​​arrow 类(或其他方式)。

<a href="#"> <img id="arrow" class="Subshown_arrow" /> Sub-forum 1 </a>
            <li class="sub-sub"> <a href="#"> Sub-sub-forum 1 <li>
            <li class="sub-sub"> <a href="#"> Sub-sub-forum 2 <li>
            <li class="sub-sub"> <a href="#"> Sub-sub-forum 3 <li>

我在这里删除了 scr ^，通常它就在那里。

var main = function() {


$(".Subshown_arrow").click(function() {
    alert("Subshown_arrow clicked!");
    $(this).removeClass("Subshown_arrow").addClass("Subhidden_arrow");
});

$(".Subhidden_arrow").click(function() {
    alert("Subhidden_arrow clicked!");
    $(this).removeClass("Subhidden_arrow").addClass("Subshown_arrow");
});
};

$(document).ready(main);

但是，当我第一次单击箭头时，它会按预期旋转。但是当我再次单击它时，jQuery 的 react 就像第一次单击一样。警报打印出“Subshown_arrow clicked!”每次。

但是当我在浏览器中尝试并使用 Chrome 的内置工具查看代码时，类发生了变化。这意味着更改类是有效的，但我的 jQuery 脚本会忽略它。

我做错了什么？或者有更好的方法吗？

Answer 1

您的问题已经被解决了数千次，当第一个类尚不存在时，您正在绑定(bind)到 .Subhidden_​​arrow 和 .Subshown_arrow 类。您需要以不同的方式绑定(bind)事件:

$('body').on('click', '.Subhidden_​​arrow', function ( e ) {});

这也适用于动态创建(更改)的元素。