单击元素后替换点击事件

Question

我有一个div类，wrapperOne类，该类具有click事件。 我想做的是：单击类wrapperOne之后，我希望禁用该类中的事件并将其添加到类animatedLeft中。 因此，当我不断点击它们时，我希望事件能够相互进行。

$(".wrapperOne").on("click", function () {
   alert("wrapperOne clicked")

   $(".wrapperOne").addClass("animatedLeft").removeClass("wrapperOne");
});


$(".animatedLeft").on("click", function(){
  alert("animatedLeft clicked")

  $(".animatedLeft").addClass("wrapperOne").removeClass("animatedLeft");
});

.wrapperOne {
  width 30px;
  height: 30px;
  background: red;
}

.animatedLeft {
  width 30px;
  height: 30px;
  background: blue;
}

<div class="wrapperOne"></div>