javascript - RemoveClass 和 AddClass 不起作用

Question

我认为这可能是因为这些元素最初没有 DOM 元素。我试过使用事件，然后使用传播工具，但它仍然无法正常工作:(

我想要它，以便当您单击其中一个元素时，它会从所有元素中删除下划线，然后将其添加到您刚刚单击的元素中，但在这种情况下它会保留下划线。要进行测试，只需使用 fiddle 链接并点击第一个 “A”，然后点击第二个更大的 “A”

( JSFiddle )

$(document).ready(function() {
  $("li.big").on("click", function(e) {
    $("li>a.underline").removeClass("underline");
    $("li.big").addClass("underline");
    e.stopPropagation();
  });
  $("li.default").on("click", function(e) {
    $("li>a.underline").removeClass("underline");
    $("li.default").addClass("underline");
    e.stopPropagation();
  });
});

a {
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li>
    <div class="raisetext">Raise Text:</div>
  </li>
  <li class="default"><a href="#" class="underline">A</a>
  </li>
  <li class="big"><a href="#" style="font-size: 20px;">A</a>
  </li>
  <li class="bigger"><a href="#" style="font-size: 26px;">A</a>
  </li>
</ul>

Answer 1

为了补充 Sushils 的回答，它听起来像是附加了 anchor 。因此，以防 anchor 标记被动态附加到页面:

$(document).ready(function() {
  $("li").on("click","a", function() {
    $("li > a").removeClass("underline");
    $(this).addClass("underline");
  });
});