javascript - JQuery 和 onclick 在这种情况下不起作用

Question

努力让 jquery 和 li 在这种环境下工作:

<div id="statLateralMenu">
    <h3>Statistics</h3>

    <ul>
        <li id="id1" class="selected">Stat 1</li>
        <li id="id2">Stat 2</li>
    </ul>
</div>

s

$(function() {
    $("#statLateralMenu li").click(function()
    {
        alert( "A" );
        $("#statLateralMenu li").removeClass("selected");
        $(this).addClass("selected");
    });
}
);

我很确定这个错误是非常愚蠢的，因为我已经在页面的另一个区域实现了这段代码并且它工作得很好，但这次我真的无法让它工作。 请问有什么线索吗？

编辑:

我什至无法触发警报，我的问题不是(还)更改类的li。 JQuery 加载在同一页面中，我有另一个 ul/li 复合体，它工作完美

编辑2: 在这一点上，也许我有点困惑，但在这里使用我的代码它不起作用: https://jsfiddle.net/nakjyyaj/4/

Answer 1

它似乎有效:

$(function() {
  $("li").click(function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
  });
});

.selected{background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>azerty</li>
  <li>bzerty</li>
  <li>czerty</li>
</ul>

要处理动态内容，您可以使用事件委托(delegate):

$(function() {
  $("ul").on("click", "li", function() {
    $("li").removeClass("selected");
    $(this).addClass("selected");
  });
});
setTimeout(function () {
  $("p").remove();
  $("ul").html(""
  + "<li>azerty</li>"
  + "<li>bzerty</li>"
  + "<li>czerty</li>"
  );
}, 1000);

.selected{background:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Wait 1 second.</p>
<ul></ul>

进一步阅读:https://stackoverflow.com/a/46251110/1636522 .