非常简单的jQuery查询

Question

var $parent = $('.parent'),
    $child = $('.child');

console.log($child);

$child.click(function(){
  console.log('clicked');
  $parent.replaceWith('<span class="child">abcd</span>');
});

.child{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <span class="child">abcd</span>
</div>

我刚接触初级Web开发工作，我正在研究jQuery并发现它很有趣。我偶然发现了这个小代码。因此，当我点击“Child”时，为什么控制台在点击它时多次生成“Clicked”消息。它显示了1次并停止了。