javascript - 在几次点击中使用 jQuery html() 方法

Question

我正在研究 this demo .我想找出为什么在使用第二个按钮后 HTML 消失了。

只要你只点击 btn #from-content-1 或者只点击 #from-content-2 一切都很好但是如果你点击 #from-content-1 然后在 #from-content-2 上再回到 #from-content-1，内容消失了!

这是我的代码:

<div class="row">
  <div class="container">
    <div id="dest">Here is the Destination</div>
  </div>
</div>

<div class="sr-only">
 <div id="content-1">This Is From Content 1</div>
 <div id="content-2">This Is From Content 2</div>  
</div>

<button class="btn btn-default" id="from-content-1">From Content 1</button>
<button class="btn btn-default" id="from-content-2">From Content 2</button>

js脚本是

<script>
$("#from-content-1").on("click",function(){
  $("#dest").html($('#content-1'));
});

$("#from-content-2").on("click",function(){
  $("#dest").html($('#content-2'));
});
</script>

我该如何解决这个问题？

Answer 1

你移动节点!改为这样做:

<script>
$("#from-content-1").on("click",function(){
  $("#dest").html($('#content-1').html());
});

$("#from-content-2").on("click",function(){
  $("#dest").html($('#content-2').html());
});
</script>