jQuery点击事件仅生效一次问题求助

嘿，我看到你作为jQuery新手遇到了语言切换只能生效一次的小麻烦，这其实是个很常见的小误区，咱们来一步步解决它～

问题根源 #

你代码里用了replaceWith(currentlanguage)，这个方法会直接把整个<span id="selected">FR</span>元素替换成纯文本（比如点击"It"后，页面上就只剩下纯文本"It"，原来的span标签和它的id="selected"都消失了）。后续再点击下拉选项时，jQuery找不到#selected这个元素，自然就无法完成切换了。

修复方案 #

把replaceWith()换成text()方法就好啦！text()只会更新元素内部的文本内容，保留原来的span元素和它的id，这样每次点击都能正确找到目标元素修改内容。

修改后的JavaScript代码如下：

$(document).ready(function() {
  $(".language").on("click", function(event){
    event.preventDefault();
    var currentlanguage = $(this).text();
    console.log(currentlanguage);
    $("#selected").text(currentlanguage); // 这里改成text()方法
  });
});

完整修复后的代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<div class="dropdown font-weight-bold">
  <a class="dropdown-toggle" href="#" data-toggle="dropdown"><span id="selected">FR</span></a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item language" href="#">It</a></li>
    <li><a class="dropdown-item language" href="#">De</a></li>
    <li><a class="dropdown-item language" href="#">Fr</a></li>
    <li><a class="dropdown-item language" href="#">En</a></li>
  </ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
  $(".language").on("click", function(event){
    event.preventDefault();
    var currentlanguage = $(this).text();
    console.log(currentlanguage);
    $("#selected").text(currentlanguage);
  });
});
</script>
</body>
</html>

这样修改后，每次点击下拉选项都能正常更新显示的语言啦，试试吧！

内容的提问来源于stack exchange，提问作者Amelie